使用defaultValue在React中创建选择输入

Question

我遇到了一个奇怪的问题，我不知道是怎么回事。我以前使用完全相同的代码，但现在它的行为不同了。也许我忽略了什么。我想要的：为了我的问题：我想呈现一个有三个选项的选择输入。其中一个选项是“Disabled DefaultValue”选项，它应该是占位符。其他两个选项都有一个值，而select的值是我要传递给它的状态。

所以我将表单呈现为这样的形式（我在这里保持简短，以便有一个干净的外观）：

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

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

似乎选项中的“禁用”部分将阻止它在呈现时被选中。我很确定这以前是有效的，新的react版本不允许这样做吗？有变通办法吗？我想要的只是有一个带有占位符的选择输入。

Answer 1

问题是禁用道具。浏览器将忽略该选项，它不能被选中，这就是为什么其他选项在默认情况下被选中。您可以处理此空状态，同时将其保存为

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>