我想从react.js按钮单击的选择选项中获得所选的值

Question

我希望从按钮单击下拉菜单中获得所选的值，然后将其保存在firebase数据库中。除了下楼，一切都很好。我还想在firebase数据库中添加一个下拉值。任何人都能帮我，我怎么能得到它？我在努力，但这是错误。有人能帮我吗？

import React, { Component } from 'react';
import Select from 'react-select';
import firebase from '../config/firebase.js';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class PostAd extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedOption: null,
      ads: [],
    };
  }

  handleClick = () => {
    firebase.database().ref('/').child('ads').push(this.state);
    console.log(`Option selected:`, selectedOption);
  };

  handleChange = (e) => {
    this.setState({
      selectedOption,
      [e.target.name]: e.target.value,
    });
    console.log(`Option selected:`, selectedOption);
  };

  render() {
    const { selectedOption } = this.state;
    return (
      <div className="container postAd-container">
        <h6 className="p-3">CHOOSE A CATEGORY</h6>
        <hr />

        <Select value={selectedOption} onChange={this.handleChange} options={options} />

        <div className="p-3">
          <div className="">
            <p>Condition *</p>
            <button className="btn-attributes" name="new" value="new" onClick={this.handleChange}>
              New
            </button>
            <button className="btn-attributes" name="used" value="used" onClick={this.handleChange}>
              Used
            </button>
          </div>

          <div className="pt-2">
            <p>Type *</p>
            <button className="btn-attributes">Apple</button>
            <button className="btn-attributes">Dany Tabs</button>
            <button className="btn-attributes">Q Tabs</button>
            <button className="btn-attributes">Samsung</button>
            <button className="btn-attributes">Other Tablets</button>
          </div>

          <div className="pt-5">
            <p>Ad Title *</p>
            <div className="form-group row">
              <div className="col-sm-6">
                <input
                  type="email"
                  name="adTitle"
                  onChange={this.handleChange}
                  className="form-control form-control-lg"
                />

                <p className="font-11">Mention the key features of your item (e.g. brand, model, age, type) 0 / 70</p>
              </div>
            </div>
          </div>

          <div className="pt-5">
            <p>Description *</p>
            <div className="form-group row">
              <div className="col-sm-6">
                <textarea name="description" onChange={this.handleChange} className="form-control" rows="3"></textarea>
                <p className="font-11">Include condition, features and reason for selling 0 / 4096</p>
              </div>
            </div>
          </div>
        </div>
        <hr />

        <div className="p-4">
          <div className="">
            <h6>SET A PRICE</h6>
            <div className="form-group row">
              <div className="col-sm-6">
                <div className="input-group mb-2">
                  <div className="input-group-prepend">
                    <div className="input-group-text">Rs</div>
                  </div>
                  <input type="number" name="price" onChange={this.handleChange} className="form-control" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="form-row pb-3">
          <div className="col-md-12 text-center">
            <button type="submit" className="btn btn-primary" onClick={this.handleClick}>
              Post Ad
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default PostAd;

Answer 1

创建一个独立的函数this.handleClickButton，并将其用于新建和已使用的按钮。相反，this.handleChange

handleClickButton = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleChange = selectedOption => {
    this.setState({
        selectedOption
      },() => {
        console.log(`Option selected:`, this.state.selectedOption);
      });
  };

此代码将在没有任何错误的情况下更改下拉列表。

如果您想用相同的功能来管理这两者的话。以下是解决办法：

handleChange = selectedOption => {
    //onClick it will get e.target.value
    if (e.target.value) {
        this.setState({
            [e.target.name]: e.target.value
        });
    } else {
    //onChange it will get the selected option.
        this.setState({
            selectedOption: e
        });
    }
};