Question

我遇到了一个奇怪的问题，我不知道发生了什么。之前我使用了完全相同的代码，但现在它的行为有所不同。也许我忽视了一些事情。我想要的是：出于我的问题的目的：我想用三个选项渲染一个选择输入。其中一个选项是＆＃34;禁用defaultValue＆＃34;选项，应该是占位符。其他两个选项都有一个值，而select的值是一个传递给它的状态。

所以我要像这样呈现表单（为了让你看起来干净，我在这里保持简短）：

<Form
  is_expenditure={this.state.is_expenditure}
/>

我已经定义了状态，它是空的。然后我有这样的Form组件：

class Form extends React.Component{
  render() {
return (
  <div>
    <form>
      <select value={this.props.is_expenditure}>
        <option disabled defaultValue>Ehne mehne Muh</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
      </select>
    </form>
  </div>
)
  }
};

每当组件呈现value = 1的选项时，都会预先选择。如果我使用浏览器刷新页面，则选择输入突然具有defaultValue。但每当我第一次启动开发服务器并查看表单时，它都有一个预选值......即使状态肯定是空的。有人有想法吗？这真是太麻烦了。我在这里剪短了，但我有几个选择输入，他们都预先选择了值= 1选项。奇怪的是，当我将第一个选择输入更改为值时，页面上的其他选择输入更改为defaultValue ...

修改

似乎＆＃34;禁用＆＃34;选项中的部分将阻止在渲染时选择它。我很确定之前有效，有没有新的反应版本不允许这样做？有解决方法吗？我想要的只是基本上有一个占位符的选择输入。

Answer 1

问题是disabled道具。浏览器将忽略该选项，并且无法选择默认选择其他选项的原因。您可以处理此空状态，同时将其保存到状态

＆＃13;

class Form extends React.Component{
  render() {
return (
  <div>
    <form>
      <select value={this.props.is_expenditure}>
        <option defaultValue>Ehne mehne Muh</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
      </select>
    </form>
  </div>
)
  }
};

ReactDOM.render(<Form/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

使用defaultValue

1 个答案: