时间戳

首页 > 解决方案 > 从 React 的下拉列表中获取未定义

javascript - 从 React 的下拉列表中获取未定义

问题描述

我已经阅读了很多帖子，以至于我认为我已经阅读了很多并且感到困惑，因为似乎有很多方法可以做我需要的事情。这是我的组件

class InputForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dropdown: 'RTS', value: '' };

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

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

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

  handleDropdown(event) {
    this.setState({ dropdown: event.target.dropdown });
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} className='flex'>
        <select value={this.state.dropdown} onChange={this.handleDropdown} className='py-2 px-3 mr-2 rounded'>
          <option value='RTS'>RTS</option>
          <option value='RTB'>RTB</option>
          <option value='BH'>BH</option>
          <option value='MPC'>MPC</option>
          <option value='MPC_DSP'>MPC_DSP</option>
        </select>

        <input
          type='text'
          value={this.state.value}
          onChange={this.handleChange}
          className='py-2 px-3 mr-2 rounded'
          placeholder='Log Name...'
        />

        <Btn onClick={() => getData(this.state.dropdown, this.state.value)}>Generate</Btn>
      </form>
    );
  }
}

export default InputForm;

当改变我的状态时，value={this.state.dropdown}我变得不确定。我是否正确设置了everyting？

标签： javascriptreactjsforms

解决方案

在您的handleDropdown函数中，您需要从而event.target.value不是检索值event.target.dropdown：

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

推荐阅读