Получить <option>атрибутов в <input>

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 был присвоен код. BusinessCode, но список данных остался с 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

На самом деле вы используете его неправильно и никогда не пытаетесь получить доступ к DOM, как этот getElementById ("business-code") в React. Это плохая практика, и она всегда получает значение через событие onChange.

Используйте значение вместо ключей, и проблема будет решена.

{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;

Answer 2

Вы можете использовать state, чтобы отслеживать выбранный объект из массива кодов, поэтому у вас есть и BusinessCode, и IndustryName

Избегайте использования jQuery в React в максимально возможной степени. Проверьте код ниже:

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>