Question

在React JSX中，我写了下面的组件：

<select //...
  onChange={event => {alert(event.target); //setState}}
>
    <option id=1>one</option>
    <option id=2>two</option>
</select>

警报为我提供了选择元素。如何在没有jQuery的情况下访问所选选项？我正在尝试在id上设置state，并进行相应的搜索和其他事情。

Answer 1

而不是id select选项，提供value属性，然后您可以event.target.value访问它。

<select 
    onChange={event => {
        alert(event.target.value);
    }
}>
    <option value="1"> one</option>
    <option value="2"> two</option>
</select>

<强> CodeSandbox

Answer 2

您通常不会直接通过事件目标访问该值。将控件值绑定到组件状态或在父组件上存储引用...然后您可以在触发事件时访问该值。

请参阅：https://stackoverflow.com/a/47842562/1306026

Answer 3

您可以访问所选的选项，如：

var elm = event.target;
console.log(elm.options[elm.selectedIndex]);

然后访问其值或文本，如：

console.log(elm.options[elm.selectedIndex].value)

DEMO（更改选项以查看结果）：

＆＃13;

function setState() {
  var elm = event.target;
  console.log(elm.options[elm.selectedIndex]);
  console.log(elm.options[elm.selectedIndex].value);
}

＆＃13;

<select onChange="setState()">
    <option id=1>one</option>
    <option id=2>two</option>
</select>

＆＃13;

如何访问React

3 个答案: