在<input>中获取<option>属性

Question

我有返回给我选项的功能：

const codesList = () => {

  return businessCodes.map((code, index) => {

    return <option key={code.BusinessCode}>{code.IndustryName}</option>;

  });

};

然后我有取值的数据列表和输入字段：

      <input

            type="text"

            className="filter-select-form-control"

            placeholder="Enter Business Code"

            id="business-code"

            list="code-dataList"

            autoComplete="off"

          ></input>

        </div>

        {/* DATALISTS CODES*/}

        <datalist id="code-dataList">

          {RightFilterFunction.codesList()}

        </datalist>

之后在获取输入字段值的函数中，出现以下情况：

const businessCode = document.getElementById("business-code").value;

用这部分代码给businessCode 分配了确切的code.IndustryName。我想知道如何访问选项 key={code.BusinessCode} 的这个关键属性。我想为businessCode分配code.BusinessCode，但datalist保留code.IndustryName。JSON（businessCodes 数组）的一部分，您将知道为什么我更喜欢将 IndustryName 可视化并将 BusinessCode 发送到端点：

{

    BusinessCode: 111,

    IndustryName: "Crop Production"

  },

  {

    BusinessCode: 112,

    IndustryName: "Animal Production and Aquaculture"

  },

  {

    BusinessCode: 113,

    IndustryName: "Forestry and Logging"

  }

Answer 1

您可以使用state来跟踪代码数组中的选定对象，因此您同时拥有BusinessCode和IndustryName尽可能避免在 React 中使用 jQuery。检查下面的代码：const businessCodes = [{&nbsp; &nbsp; BusinessCode: 111,&nbsp; &nbsp; IndustryName: "Crop Production"&nbsp; },&nbsp; {&nbsp; &nbsp; BusinessCode: 112,&nbsp; &nbsp; IndustryName: "Animal Production and Aquaculture"&nbsp; },&nbsp; {&nbsp; &nbsp; BusinessCode: 113,&nbsp; &nbsp; IndustryName: "Forestry and Logging"&nbsp; }];&nbsp;&nbsp;const codesList = () => {&nbsp; return businessCodes.map((code, index) => {&nbsp; &nbsp; return <option key={code.BusinessCode}>{code.IndustryName}</option>;&nbsp; });};class App extends React.Component {&nbsp; &nbsp;constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {selectedOption: {}};&nbsp; &nbsp; this.handleChange = this.handleChange.bind(this);&nbsp; }&nbsp; handleChange(event) {&nbsp; &nbsp; let selectedOption;&nbsp; &nbsp; let filtered = businessCodes.filter(item => item["IndustryName"] === event.target.value)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if(filtered.length) selectedOption = filtered[0]&nbsp; &nbsp; else selectedOption = {}&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; this.setState({selectedOption}, function(){&nbsp; &nbsp; &nbsp; if(Object.keys(this.state.selectedOption).length)&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.state.selectedOption)&nbsp; &nbsp; });&nbsp; }&nbsp;&nbsp;&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Enter Business Code"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list="code-dataList"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoComplete="off"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.value}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; {/* DATALISTS CODES*/}&nbsp; &nbsp; &nbsp; &nbsp; <datalist id="code-dataList">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {codesList()}&nbsp; &nbsp; &nbsp; &nbsp; </datalist>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}// Render itReactDOM.render(&nbsp; <App />,&nbsp; document.getElementById("react"));<div id="react"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

实际上，您错误地使用了它，并且永远不要尝试在 React 中访问像 getElementById("business-code") 这样的 DOM。这是一种不好的做法，并且总是通过 onChange 事件获得价值。使用值而不是键，问题将得到解决。{this.state.businessCodes.map((code, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option key={index} value={code.BusinessCode}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {code.IndustryName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}完整代码它是如何在 React 上工作的。import React, { Component } from "react";class App extends Component {&nbsp; state = {&nbsp; &nbsp; businessCodes: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; BusinessCode: 111,&nbsp; &nbsp; &nbsp; &nbsp; IndustryName: "Crop Production"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; BusinessCode: 112,&nbsp; &nbsp; &nbsp; &nbsp; IndustryName: "Animal Production and Aquaculture"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; BusinessCode: 113,&nbsp; &nbsp; &nbsp; &nbsp; IndustryName: "Forestry and Logging"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="code"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="filter-select-form-control"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Enter Business Code"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="business-code"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list="code-dataList"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoComplete="off"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <datalist id="code-dataList">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.businessCodes.map((code, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option key={index} value={code.BusinessCode}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {code.IndustryName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </datalist>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;