React.js 选择列表未保存所选选项

Question

我的 React.js 应用程序中有 2 个<select>列表。它们渲染得很好，并且附加到一个handleChange函数上。它们被编程为最初默认为第一个选项。

当用户选择另一个选项时，列表在视觉上似乎保留第一个选项。但是，当我提交表单并提醒状态中的关联值时，它会提醒用户选择的值。

这是我的渲染函数：

<div id="userActions">

  <form id="userActionsForm" onSubmit={this.handleSubmit}>

    <label htmlFor="operator">Operator:</label>

    <select

      id="operator"

      name="operator"

      value={this.state.operator}

      onChange={this.handleChange}

    >

      {this.state &&

        this.state.operators &&

        this.state.operators.map((op) => <option value={op}>{op}</option>)}

    </select>

    <label htmlFor="user">User:</label>

    <select

      id="user"

      name="user"

      value={this.state.user}

      onChange={this.handleChange}

    >

      {this.state &&

        this.state.testUsers &&

        this.state.testUsers.map((tu) => <option value={tu}>{tu}</option>)}

    </select>

    <div className="submit">

      <input type="submit" value="Submit" />

    </div>

    <span className="error">{this.state.error}</span>

  </form>

</div>

这是我的onChange功能：

handleChange(event) {

  this.state.value = event.currentTarget.value;

  if (event.currentTarget.id === 'operator') {

    this.state.operator = event.currentTarget.value;

  } else if (event.currentTarget.id === 'user') {

    this.state.user = event.currentTarget.value;

  }

}

这是我的onSubmit：

handleSubmit(event) {

  alert(this.state.user);

  alert(this.state.operator);

  event.preventDefault();

}

Answer 1

handleChange问题是你通过像这样更新它来改变状态this.state.operator = event.currentTarget.value;。你永远不应该直接更新状态。你需要使用setState.我刚刚在下面为您创建了一个片段。您可以单击“运行代码片段”并查看其实际效果。我handleChange通过使用event.target.nameas 对象中的键使该方法更简单state。您还需要key为列表中的每个子项添加唯一的道具（例如，当您使用时.map()）。const operators = ["op1", "op2", "op3"];const testUsers = ["user1", "user2", "user3", "user4"];class App extends React.Component {  state = {    operator: operators[0],    operators,    testUsers,    user: testUsers[0],  };  handleChange = (event) => {    this.setState({      [event.target.name]: event.target.value    });  };  handleSubmit = (event) => {    event.preventDefault();    console.log({      user: this.state.user,      operator: this.state.operator,    });  };  render() {    return (      <form id="userActionsForm" onSubmit={this.handleSubmit}>        <label htmlFor="operator">Operator:</label>        <select          id="operator"          name="operator"          value={this.state.operator}          onChange={this.handleChange}        >          {this.state.operators.map((operator) => (            <option key={operator} value={operator}>              {operator}            </option>          ))}        </select>        <label htmlFor="user">User:</label>        <select          id="user"          name="user"          value={this.state.user}          onChange={this.handleChange}        >          {this.state.testUsers.map((user) => (            <option key={user} value={user}>              {user}            </option>          ))}        </select>        <div className="submit">          <button type="submit">Submit</button>        </div>        <span className="error">{this.state.error}</span>      </form>    );  }}ReactDOM.render(<App />, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="root"></div>