React Bootstrap 选项的默认值

Question

我正在尝试为 Form.Control 设置一个值/占位符，但没有任何效果。

<Form.Row>
           <Form.Label>Select Operator:</Form.Label>
           <Form.Control as="select" value="" name="operator" onChange={this.handleChange} disabled={shouldDisable}>
           {
              operators.map(operator => {
                 return <option key={operator}>{operator}</option>
               })
         }
         </Form.Control>
 </Form.Row>

我希望默认值为 Choose Operator...，无法选择（不触发 onChange）添加 value、defaultValue、placeholder 无效

Answer 1

阅读 React-Bootstrap docs 没有这种可能性。我的建议是创建第一个 option，其值为空字符串 ''。同样，我建议在 Form.Control 上设置值属性以遵循 React 准则以获得受控状态：

<Form.Row>
    <Form.Label>Select Operator:</Form.Label>
    <Form.Control as="select" value={this.state.selectedOperator} name="operator" onChange={this.handleChange} disabled={shouldDisable}>
      <option key={'initial'} value="">Choose Operator...</option>
      {
        operators.map(operator => {
            return <option key={operator} value={operator}>{operator}</option>
          })
      }
    </Form.Control>
</Form.Row>

React Bootstrap 选项的默认值

Default value for React Boostrap Option

reactjs

react-bootstrap