在<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 = [{
    BusinessCode: 111,
    IndustryName: "Crop Production"
  },
  {
    BusinessCode: 112,
    IndustryName: "Animal Production and Aquaculture"
  },
  {
    BusinessCode: 113,
    IndustryName: "Forestry and Logging"
  }];
  
const codesList = () => {
  return businessCodes.map((code, index) => {
    return <option key={code.BusinessCode}>{code.IndustryName}</option>;
  });
};

class App extends React.Component {
   constructor(props) {
    super(props);
    this.state = {selectedOption: {}};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    let selectedOption;
    let filtered = businessCodes.filter(item => item["IndustryName"] === event.target.value)
    
    if(filtered.length) selectedOption = filtered[0]
    else selectedOption = {}
    
    this.setState({selectedOption}, function(){
      if(Object.keys(this.state.selectedOption).length)
        console.log(this.state.selectedOption)
    });
  }
  
  render() {
    return (
      <div>
        <input
            type="text"
            placeholder="Enter Business Code"
            list="code-dataList"
            autoComplete="off"
            value={this.state.value} 
            onChange={this.handleChange}
          />
        {/* DATALISTS CODES*/}
        <datalist id="code-dataList">
          {codesList()}
        </datalist>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  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 事件获得价值。

用value代替key，问题就解决了。

{this.state.businessCodes.map((code, index) => (
            <option key={index} value={code.BusinessCode}>
              {code.IndustryName}
            </option>
          ))}

完整代码它在 React 上的工作原理。

import React, { Component } from "react";

class App extends Component {
  state = {
    businessCodes: [
      {
        BusinessCode: 111,
        IndustryName: "Crop Production"
      },
      {
        BusinessCode: 112,
        IndustryName: "Animal Production and Aquaculture"
      },
      {
        BusinessCode: 113,
        IndustryName: "Forestry and Logging"
      }
    ]
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="code"
          className="filter-select-form-control"
          placeholder="Enter Business Code"
          id="business-code"
          list="code-dataList"
          autoComplete="off"
        />
        <datalist id="code-dataList">
          {this.state.businessCodes.map((code, index) => (
            <option key={index} value={code.BusinessCode}>
              {code.IndustryName}
            </option>
          ))}
        </datalist>
      </div>
    );
  }
}

export default App;