时间戳

首页 > 解决方案 > React.js 选择列表不包含选定的选项

javascript - React.js 选择列表不包含选定的选项

问题描述

我的 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();
}

标签： javascriptreactjsreact-state

解决方案

问题是您正在handleChange通过像这样更新它来改变状态this.state.operator = event.currentTarget.value;。你永远不应该直接更新状态。你需要使用setState.

我刚刚在下面为您创建了一个片段。您可以单击“运行代码片段”并查看它的运行情况。我handleChange通过event.target.name用作对象中的键使方法更简单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>

推荐阅读