Javascript 使用React获取Select值

尝试使用React道具访问引导选择表单值。这是我到目前为止尝试过的，但它不存储选项值

示例代码：

class BottomBar extends React.Component {

  constructor(props) {
    super(props);
    this.state =  {
      hidden: true,
      items: [],
      text: '',
      priority: ''
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handlePriority = this.handlePriority.bind(this);
  };
  handleChange(e) {
    this.setState({text: e.target.value});


  }
  handlePriority(t) {
    this.setState({priority: t.target.value});
  }
  handleSubmit(e) {
    e.preventDefault();
    if(!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now(),
      priority: this.state.priority
    };
    this.setState(state => ({items: state.items.concat(newItem), text: '', priority: ''}));
    console.log(newItem);
  }

  handleClick(t) {
    i++;
    if(i === 1) {
        this.setState({hidden: false});
    } else if(i === 2) {
        this.setState({hidden: true});
        i = 0;
    }

  }
  render() {
    const { classes } = this.props;
    return(

      <React.Fragment>
        <AddCard items={this.state.items} id={this.state.id} priority={this.state.priority} item={this.state.item}/>
        <CssBaseline />
        <AppBar position="fixed" color="primary" className={classes.appBar}>
          {!this.state.hidden ? <TodoList text={this.state.text} handlePriorty={this.handlePriorty} priority={this.state.priority} handleSubmit={this.handleSubmit} items={this.state.items} handleChange={this.handleChange}/> : null}
          <Toolbar className={classes.toolbar}>
            <IconButton color="inherit" aria-label="Open drawer">
              <MenuIcon />

            </IconButton>
            <a href="#" onClick={this.handleClick}>
            <Button variant="fab" color="secondary" aria-label="Add" className={classes.fabButton}>
              <AddIcon />
            </Button>
            </a>     
            <div>

              <IconButton color="inherit">
                <SearchIcon />
              </IconButton>
              <IconButton color="inherit">
                <MoreIcon />
              </IconButton>
            </div>

          </Toolbar>
        </AppBar>
      </React.Fragment>
    );
  }

}

class TodoList extends React.Component {

  render() {
    return(
      <div className="container">

      <form onSubmit={this.props.handleSubmit}>
        <div className={"form-group"}>
          <label htmlFor={"title"}>Enter A Task Title</label>
          <input value={this.props.text} onChange={this.props.handleChange} type="text" className={"form-control"} id="title" rows="3"></input>
        </div>
        <div className={"form-group"}>
            <label htmlFor={"exampleFormControlSelect1"}>Example select</label>
              <select onChange={this.props.handlePriority} className={"form-control"} id="exampleFormControlSelect1">
                <option value={this.props.priority} onChange={this.props.handlePriority}>Low Priority</option>
                <option value={this.props.priorty} >Medium Priority</option>
                <option value={this.props.priorty} >High Priority</option>
                <option value={this.props.priorty} >Important</option>
                <option value={this.props.priorty} >Very Important</option>
              </select>
            </div>
        <button className={"btn btn-primary btn-custom"}>Add : {this.props.items.length + 1}</button>
      </form>
    </div>
    );
  }
}

类底部栏扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
隐藏：是的，
项目：[]，
文本：“”，
优先级：“”
};
this.handleClick=this.handleClick.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handlePriority=this.handlePriority.bind（this）；
};
手变（e）{
this.setState（{text:e.target.value}）；
}
手优先级（t）{
this.setState（{priority:t.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
if（！this.state.text.length）{
返回；
}
常量newItem={
text:this.state.text，
id:Date.now（），
优先级：this.state.priority
};
this.setState（state=>（{items:state.items.concat（newItem），文本：“”，优先级：“”}）；
console.log（newItem）；
}
手舔（t）{
i++；
如果（i==1）{
this.setState（{hidden:false}）；
}else如果（i==2）{
this.setState（{hidden:true}）；
i=0；
}
}
render（）{
const{classes}=this.props；
返回(
);
}
}
类TodoList扩展了React.Component{
render（）{
返回(
输入任务标题
示例选择
低优先级
中等优先级
高优先级
重要的
非常重要
添加：{this.props.items.length+1}
);
}
}

我的代码包含两个类，一个是设置状态中的存储值，另一个是通过道具接受这些状态。我的文本输入工作正常，但我的选择/选项选择器似乎没有保存选定的值

输出：

---

感谢您的建设性反馈。

我强烈建议您将代码拆分为更小的函数。 特别是，我建议将

类组件

作为包装器，并将

功能组件

用于

选择

和

选项

节点

首先，让我们为

选项节点

作为最后一步，我们将所有这些放在一起：

类应用程序扩展了React.Component{
状态={
价值：2
};
handleChange=e=>{
this.setState（{value:e.target.value}）；
};
render（）{
返回(
);
}
}

const Option = ({ value, description }) => (
  <option value={value}>{description}</option>
);

const SelectBox = ({ children, onChange, value }) => (
  <select onChange={onChange} value={value}>
    {children}
  </select>
);

class App extends React.Component {
  state = {
    value: 2
  };

  handleChange = e => {
    this.setState({ value: e.target.value });
  };

  render() {
    return (
      <div className="App">
        <SelectBox onChange={this.handleChange} value={this.state.value}>
          <Option value="1" description="First Item" />
          <Option value="2" description="Second Item" />
          <Option value="3" description="Third Item" />
        </SelectBox>
      </div>
    );
  }
}