在React中使用默认值创建选择输入

Question

我遇到一个奇怪的问题，不知道发生了什么。 我以前使用完全相同的代码，但现在表现有所不同。 也许我忽略了一些东西。 我想要的是：在这里，我要提出的问题是：我想用三个选项呈现选择输入。 这些选项之一是“ disabled defaultValue”选项，该选项应该是占位符。 其他两个选项有一个值，而选择的值是我要传递给它的状态。

因此，我要像这样渲染表单（为了使外观简洁，我在这里将其简短）：

<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>
)
  }
};

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

编辑

似乎该选项中的“禁用”部分将阻止它在渲染时被选中。 我敢肯定这是可行的，是否有较新的反应版本禁止这样做？ 有解决方法吗？ 我想要的只是基本上有一个带占位符的选择输入。

Answer 1

问题是disabled道具。 浏览器将忽略该选项，并且无法选择它，这就是默认情况下选择其他选项的原因。 您可以在将此状态保存为空状态的同时进行处理

 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')) 

 <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>