Question

我有一个呈现下拉菜单的React组件。当组件从其父级接收道具时，组件的状态会更新。我已经设置了＆lt;'select＆gt;的'value'属性元素到状态，以便在收到新道具时重新渲染。这会在收到道具时成功地重新呈现下拉菜单中的值，但禁止它选择其他选项。

<select
      type="text"
      name="dogOwnerType"
      id="dogOwnerType"
      className="form-control"
      data-bv-field="dogOwnerType"
      value={this.state.dogOwnerType.ownerType}
    >
      <option value="">Choose Owner Type</option>
      <option value="DogLover">DogLover</option>
      <option value="DogOwner">DogOwner</option>
    </select>

Answer 1

能够改变价值;你应该添加一个onChange处理程序，它将新值设置为状态。

    // define function which sets new value to state
    updateOwnerType = event => {
        this.setState({
            dogOwnerType: { 
                ...this.state.dogOwnerType, 
                ownerType: event.target.value,
           })
    }

    {/* add your onChange handler to select element */}
    <select
          type="text"
          name="dogOwnerType"
          id="dogOwnerType"
          className="form-control"
          data-bv-field="dogOwnerType"
          onChange={this.updateOwnerType}
          value={this.state.dogOwnerType.ownerType}
        >

React：在将value属性赋值给组件的状态后，无法选择下拉菜单选项

1 个答案: