OnChange 事件，使用 React JS 进行下拉列表

javascript reactjs

2022-08-30 00:38:28

var MySelect = React.createClass({
     change: function(){
         return document.querySelector('#lang').value;
     },
     render: function(){
        return(
           <div>
               <select id="lang">
                  <option value="select" onChange={this.change}>Select</option>
                  <option value="Java" onChange={this.change}>Java</option>
                  <option value="C++" onChange={this.change}>C++</option>
               </select>
               <p></p>
               <p value={this.change}></p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

事件不起作用。onChange

答案 1

更改事件在元素上触发，而不是在元素上触发。但是，这并不是唯一的问题。定义函数的方式不会导致组件的重新呈现。看起来你可能还没有完全掌握 React 的概念，所以也许 “Thinking in React” 会有所帮助。<select><option>change

您必须将所选值存储为状态，并在值更改时更新状态。更新状态将触发组件的重新呈现。

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

另请注意，元素没有属性。React/JSX 只是简单地复制了众所周知的 HTML 语法，它没有引入自定义属性（和除外）。如果您希望所选值成为元素的内容，则只需将其放入其中，就像处理任何静态内容一样。<p>valuekeyref<p>

了解有关事件处理、状态和窗体控件的详细信息：

答案 2

React Hooks （16.8+）：

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};