Question

我想获取选项框的值。这是我编写的示例代码。我正在尝试从数组中填充选项框。如果解决方案需要，我可以告诉您详细信息。谢谢您的提前帮助！

import React from 'react';

class Scooters extends React.Component {
  static defaultProps = {
    cat_brand: ['Honda', 'Peugeot', 'Yamaha'],
    cat_cc: ['50cc', '125cc', '150cc', '250cc', '300cc'],
    cat_price: ['20-70 €', '80-120 €', '130-160 €']
  }

  btnClick() {
    alert('Button has been clicked...');
    {/* I would like to alert here the selected options of the boxes. */}

  }

  render() {
    let Brand_categoryOptions = this.props.cat_brand.map(categoryBrand => {
      return <option key={categoryBrand} value={categoryBrand}>{categoryBrand}</option>
    });
    let Cc_categoryOptions = this.props.cat_cc.map(categoryCc => {
      return <option key={categoryCc} value={categoryCc}>{categoryCc}</option>
    });
    let Price_categoryOptions = this.props.cat_price.map(categoryPrice => {
      return <option key={categoryPrice} value={categoryPrice}>{categoryPrice}</option>
    });

  return (

    <div>
      <div className="container-fluid content">
        <h2 className="text-center mt-2">Choose from our Scooters</h2>

        <br></br>

      <form>
      <div class="container col-lg-4 mt-5">
        <table class="table table-bordered">

        <tr><th>Specifications</th> <th>Set the parameters</th></tr>
        <tr><td>Scooter Brand</td> <td><select ref="cat_brand">{Brand_categoryOptions}</select></td></tr>
        <tr><td>Engine CC</td>     <td><select ref="cat_cc">{Cc_categoryOptions}</select></td></tr>
        <tr><td>Unit Price</td>    <td><select ref="cat_price">{Price_categoryOptions}</select></td></tr>
        <tr><th>Action</th> <th><button  onClick={this.btnClick}>Search</button></th></tr>

        </table>
      </div>
      </form>


      </div>
    </div>
  );
}
};

export default Scooters;

Answer 1

您需要添加事件处理函数以选择元素并将值存储在状态中。另外，不要忘记将btnClick函数绑定到构造函数中，或者改用箭头函数

下面的代码可以工作

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

  btnClick = () => {
      alert('Option selected ', this.state.value);
  }
  <select ref="cat_price" onChange={this.dropDownChange} value={this.state.value}>{Price_categoryOptions}</select>

Answer 2

尝试一下。我在窗体上添加了一个onChange处理程序，该处理程序接受change事件，并分别设置组件状态（状态会使用默认属性中的值进行初始化，因此，如果您未选择任何内容并单击它，则具有默认值）。

它获得select元素上的name属性和事件目标的值。在提交时，您可以防止默认行为即提交，因此您可以对数据进行任何操作。

class Scooters extends React.Component {

  static defaultProps = {
    cat_brand: ['Honda', 'Peugeot', 'Yamaha'],
    cat_cc: ['50cc', '125cc', '150cc', '250cc', '300cc'],
    cat_price: ['20-70 €', '80-120 €', '130-160 €']
  }

  state = {
    cat_brand: this.props.cat_brand[0],
    cat_cc: this.props.cat_cc[0],
    cat_price: this.props.cat_price[0],
  }

  onChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value })
  }

  btnClick = (event) => {
    event.preventDefault();
    console.log(this.state);
  }

  render() {

    let Brand_categoryOptions = this.props.cat_brand.map(categoryBrand => (<option key={categoryBrand} value={categoryBrand}>{categoryBrand}</option>));
    let Cc_categoryOptions = this.props.cat_cc.map(categoryCc => (<option key={categoryCc} value={categoryCc}>{categoryCc}</option>));
    let Price_categoryOptions = this.props.cat_price.map(categoryPrice => (<option key={categoryPrice} value={categoryPrice}>{categoryPrice}</option>));

    return (

      <div>
        <div className="container-fluid content">
          <h2 className="text-center mt-2">Choose from our Scooters</h2>
          <br></br>
          <form onChange={this.onChange}>
            <div className="container col-lg-4 mt-5">
              <table className="table table-bordered">
                <tbody>
                  <tr>
                    <th>Specifications</th>
                    <th>Set the parameters</th>
                  </tr>
                  <tr>
                    <td>Scooter Brand</td>
                    <td>
                      <select name="cat_brand" ref="cat_brand">{Brand_categoryOptions}</select>
                    </td>
                  </tr>
                  <tr>
                    <td>Engine CC</td>
                    <td>
                      <select name="cat_cc" ref="cat_cc">{Cc_categoryOptions}</select>
                    </td>
                  </tr>
                  <tr>
                    <td>Unit Price</td>
                    <td>
                      <select name="cat_price" ref="cat_price">{Price_categoryOptions}</select>
                    </td>
                  </tr>
                  <tr>
                    <th>Action</th>
                    <th>
                      <button onClick={this.btnClick}>Search</button>
                    </th>
                  </tr>
                </tbody>
              </table>
            </div>
          </form>
        </div>
      </div>
    );
  }
};

如何在React中警告选项框的值？

2 个答案: