Question

我试图从下拉列表中获取值并将其发送到数据库。但我无法这样做。我在StackOverflow上看到了类似的问题，但没有解决方案适合我。我不知道这个问题是什么。

＆＃13;

class step_tabtwo extends React.Component {
    constructor() {
      super();
      this.state = {
        title: "",
        provider: "",
        subject: "",
        summary: "",
        full_description: "",
        level: "",
        pacing_type: "",
        certification: false
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleCheck = this.handleCheck.bind(this);
      this.handleLogout = this.handleLogout.bind(this);
    }

    handleChange(event) {
      const state = this.state;
      state[event.target.name] = event.target.value;
      this.setState(state);
    }


    render() {
        const {
          provider,
          subject,
          summary,
          full_description,
          level,
          pacing_type
        } = this.state;
        return (

            <
            select name = "pacing_type"
            defaultValue = {
              this.state.pacing_type
            }
            onChange = {
              this.handleChange
            }
            className = "form-control" >
            <
            option value = "Self Paced" > Self Paced < /option> <
            option value = "Provider Paced" > Provider Paced < /option> <
            option value = "Classroom" > Classroom < /option> < /
            select >

＆＃13;

Answer 1

正如评论中指出的那样，handleChange会改变状态：

handleChange(event) {
  const state = this.state; // this just assign state Object to another variable
  state[event.target.name] = event.target.value; // You are mutating original state
  this.setState(state); // you pass back again the same state Object, where you should pass new Object
}

尝试：

handleChange(event) {
  const state = Object.assign({}, this.state); // copy key-values from original state object
  state[event.target.name] = event.target.value; // now you are mutating differen Object
  this.setState(state); // you pass that new Object to be merged into the state
}

ReactJS：无法获取下拉菜单的值

1 个答案: