我想从 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>

Answer 1

创建一个单独的函数this.handleClickButton并将其用于新按钮和旧按钮。而是this.handleChangehandleClickButton = e => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; [e.target.name]: e.target.value&nbsp; &nbsp; });&nbsp; };&nbsp; handleChange = selectedOption => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; selectedOption&nbsp; &nbsp; &nbsp; },() => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`Option selected:`, this.state.selectedOption);&nbsp; &nbsp; &nbsp; });&nbsp; };此代码将更改下拉列表，不会出现任何错误。如果您想使用相同的功能来管理两者。以下是解决方案：handleChange = selectedOption => {&nbsp; &nbsp; //onClick it will get e.target.value&nbsp; &nbsp; if (e.target.value) {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [e.target.name]: e.target.value&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } else {&nbsp; &nbsp; //onChange it will get the selected option.&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedOption: e&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }};