使用React获取选择值

Question

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

示例代码：

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>
    );
  }
}

我的代码包含两个类，其中一个是在状态中设置存储的值，第二个类是通过prop接受这些状态。我的文字输入正常，但我的选择/选项选择器似乎没有保存所选的值。

输出：

谢谢您的建设性反馈。

Answer 1

我强烈建议您将代码拆分为较小的函数。 特别是，我建议使用class component作为包装器，并建议function components作为select和option节点。

首先，让我们为function component创建一个option node

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

如您所见，它包含2个参数：value和description。随时添加自己的内容。

然后，为我们的function component创建一个select node

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>
    );
  }
}

Link to codebox