如何在React中从<select>中获取元素的Id？

Question

我有一个函数handleSubmit(event){}。如何获取所选选项的 id？<select id="category">    <option id="1">Travel</option>    <option id="2">Auto Loan</option> </select>

Answer 1

我认为你应该使用值而不是 ID。但如果你非常需要所选选项的 ID 那么你可以尝试这个-

 handleChange = (event) => {

      const index = event.target.selectedIndex;

      const optionElement = event.target.childNodes[index];

      const optionElementId = optionElement.getAttribute('id');

      console.log(optionElementId);

  }

选择列表是-

<select onChange={this.handleChange}>

    <option id="1">Travel</option>

    <option id="2">Autoloan</option>

</select>

Answer 2

HTMLSelectElement元素有selectedIndex属性。使用它和孩子列表，您可以获得孩子的属性：

<select id="category" onChange={this.selectChanged}>

    <option id="1">Travel</option>

    <option id="2">Auto Loan</option>

</select>

selectChanged(event){

    const select = event.target;

    const id = select.children[select.selectedIndex].id;

    //now you can store the id's value to state or somewhere else

}

如果您需要进入id表单提交处理程序，您必须通过 id 查找select，然后执行相同的操作：

onSubmit(event) {

    const form = event.target;

    const select = form.elements.namedItem('category');

    const id = select.children[select.selectedIndex].id;

}

Answer 3

您可以使用来完成此操作value，例如创建此状态和函数

const [category, setCategory] = useState("1");

const handleChange = (e) => { setCategory(e.target.value) }

那么你可以这样做

<select value={category} onChange={this.handleChange}>

    <option value="1">Travel</option>

    <option value="2">Autoloan</option>

</select>

Answer 4

根据reactjs.org https://reactjs.org/docs/forms.html#the-select-tag， 该<select>元素在react中与HTML略有不同。在 HTML 中，<select>创建一个下拉列表。例如，此 HTML 创建一个口味下拉列表：

<select>

  <option value="grapefruit">Grapefruit</option>

  <option value="lime">Lime</option>

  <option selected value="coconut">Coconut</option>

  <option value="mango">Mango</option>

</select>

请注意，由于选定的属性，椰子选项最初被选中。React 不使用这个选定的属性，而是使用根标签上的value属性。这在受控组件中更方便，因为您只需在一处更新它。例如：select

class FlavorForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {

    this.setState({value: event.target.value});

  }

  handleSubmit(event) {

    alert('Your favorite flavor is: ' + this.state.value);

    event.preventDefault();

  }

  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          Pick your favorite flavor:

          <select value={this.state.value} onChange={this.handleChange}>

            <option value="grapefruit">Grapefruit</option>

            <option value="lime">Lime</option>

            <option value="coconut">Coconut</option>

            <option value="mango">Mango</option>

          </select>

        </label>

        <input type="submit" value="Submit" />

      </form>

    );

  }

}