Question

如何使用相同的handleChange方法捕获（并设置为状态）输入和选择的值？该代码将不起作用，因为select没有名称属性。

class SearchBar extends Component {
  constructor () {
    super();
    this.state = {
      age: '',
      name: '',
      selected: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange (evt) {
    this.setState({ [evt.target.name]: evt.target.value });
  }

  render () {
const unique = [...new Set(props.items.map(item => item.position))];
       const items = unique.map((i, index) =>{return ( <option onChange={this.handleChange} value={i} key={index}> {i}</option> )
      });
   return (
      <div>
        <input type="text" name="name" 
          pattern= "/[a-zA-Z]+" onChange={this.handleChange} />
        <input type="number" name="age" 
         min="18" max="40" onChange={this.handleChange} />
 <React.Fragment>
  <select>{items}</select>
 </React.Fragment>
       <button onClick={this.handleClick}>Search</button>
        </div>
    );
  }
}

Answer 1

要将来自select标签的值存储到存储中，请使用单独的handleChange方法（例如handleSelectChange）并将该方法传递给select组件。

或者，如果您想使用相同的方法，则可以使用switch语句：

handleChange (evt) {
    switch(evt.target.type) {
      case 'input':
        this.setState({ [evt.target.name]: evt.target.value });
        break;
      case 'select':
        this.setState({ selected: evt.target.value });
        break;
    }

  }

有一个很好的示例，说明如何在React文档中存储来自选择组件的值：https://reactjs.org/docs/forms.html#the-select-tag

获取两个输入和一个选择菜单的值

1 个答案: