Question

class button extends Component {

  constructor(props) {
    super(props);
    this.state = {
      role: ''
    };

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

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

  handleSubmit(event) {
    console.log(this.state.role);
    event.preventDefault();
  }

  render() { 
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            <select value={this.state.role} onChange={this.handleChange}>
              <option value="A" >A</option>
              <option value="B" >B</option>
            </select>
          </label>
          <input type="submit" value="a" />
        </form>
      </div>
    );
  }
}

如果我要转到滚动条并单击A或B，则应该控制台日志A或B，但它会显示为空。为什么？目前，我也无法滚动条。我尝试使用id作为this.state.role的名称，但这些名称也不起作用

Answer 1

在下面尝试代码

class button extends Component {

constructor(props) {
 super(props);
 this.state = {
   role: ''
 };

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

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

handleSubmit(event) {
  console.log(this.state.role);
  event.preventDefault();
}



render() {

  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <select name="role" value={this.state.role} onChange={this.handleChange}>
            <option value="A" >A</option>
            <option value="B" >B</option>
          </select>
        </label>
        <input type="submit" value="a" />
      </form>
    </div>


    );
  }
}

此外，请查看有关受控组件的文档以及如何在react https://reactjs.org/docs/forms.html

中处理表单

Answer 2

您在handleChange方法中使用event.target.id，但是您的选择没有id属性（顺便说一句，“ name”属性比“ id”更适合）。另外，您应该定义一个初始角色值（默认情况下，您的选择设置为A）；

class Button extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            role: 'A'
        };

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

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

    handleSubmit(event) {
        console.log(this.state.role);
        event.preventDefault();
    }

    render() {

        return (<div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    <select id="role" value={this.state.role} onChange={this.handleChange}>
                        <option value="A">A</option>
                        <option value="B">B</option>
                    </select>
                </label>
                <input type="submit" value="a"/>
            </form>
        </div>);
    }
}

ReactDOM.render(< Button / >, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 3

如果我对您的理解正确，这就是解决问题的方法：

class Button extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      role: 'A'
    };

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

  handleChange(event) {
    console.log('####onChange Value: ', event.target.value)
    this.setState({ role: event.target.value });
  }

  handleSubmit(event) {
    console.log('submited value: ',this.state.role);
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            <select value={this.state.role} onChange={this.handleChange}>
              <option value="A" >A</option>
              <option value="B" >B</option>
            </select>
          </label>
          <input type="submit" value={this.state.role} />
        </form>
      </div>
    );
  }
}

如何从Select React JS中获取值

3 个答案: