javascript - 在下拉列表中选择一个选项时，如何使用 onChange 更改状态但使用选项标签内的值以外的值

Question

在下拉菜单方面需要一些帮助。我似乎想不出一种方法来将 ID specific 传递给那个特定的下拉列表 <option>这样当用户做出选择时可以使用该值(例如 setState )。通常的情况是读取下拉列表本身的值，但在我的例子中，我不想要显示的值，而是另一个“幕后”或隐藏的值。

请注意，我已经研究过受控组件对表单的 react 等，这个问题有点不同，我试图找到答案的尝试都是空的。

我正在使用 React 和 javascript，但我认为如果您对 javascript 有所了解，您可能会有所帮助。

下拉菜单的设置如下所示，在更改下拉菜单选择时，它会运行函数 handleStatusChange .

<select
   id="inputIdentity"
   className="select-form"
   onChange={this.handleStatusChange}
 >
    <option value="" hidden>
       please choose
    </option>

    <option>status1</option>
    <option>status2</option>
    <option>status3</option>
</select>

在实际操作中，选项是从通过 api 获取的数据中映射出来的，因为它们可以在后端进行更改:

<select
  id="inputIdentity"
  className="form-control content-input"
  onChange={this.handleStatusChange}
>
  <option value="" hidden>
    Please Choose
  </option>
     {statusData ? (
        statusData.map((status) => (
            <option>{status.title}</option>
        ))
      ) : (
        <option>Loading...</option>
      )}
</select>

this.handleStatusChange检查事件的值(这是在下拉列表中更改选择的行为，通过以下方式访问该值:e.target.value)以读取 inside <option> 的值被选中...读取所选下拉值的方法类似于:

handleStatusChange = (e) => {
   this.setState({
      // set it to state
      status: e.target.value
   });
  };
I

这是标准的做法。

现在我们回到问题 - 是否有一种方法可以从每个未显示的下拉列表中读取一个值(从 e.target.value 读取)，即。如果他们每个人都有一个 ID 或其他东西，我该如何传递它以便 e.target.value 能够访问这个 ID。

如果您查看我映射出的版本(如果您不熟悉 map 函数，则循环退出)<option>标签并在每次迭代中传递 title与 {status.title} .我可以访问 id与 status.id但是 onChange 处理程序在 <select> 中标记并且不能在 map 内/循环，因此通过将 id 传递到 onChange 处理程序来处理它也是不可能的。

onChange 处理程序访问未在 <option> 之间显示的特定值的正确方法是什么？标签？

Answer 1

您可以将选项保留在您的组件状态中，并使用数组方法 find 找到与所选选项对应的选项并使用它。

示例

class App extends React.Component {
  state = {
    options: [
      { value: "status1", label: "Status 1", secretValue: "foo" },
      { value: "status2", label: "Status 2", secretValue: "bar" },
      { value: "status3", label: "Status 3", secretValue: "baz" }
    ],
    selectedOption: ""
  };

  handleStatusChange = e => {
    const { value } = e.target;
    
    this.setState(prevState => {
      const { secretValue } = prevState.options.find(
        option => option.value === value
      );
      console.log(secretValue);
      return { selectedOption: value };
    });
  };

  render() {
    const { options, selectedOption } = this.state;

    return (
      <select value={selectedOption} onChange={this.handleStatusChange}>
        <option value="" hidden>
          please choose
        </option>
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    );
  }
}

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>