我想在 react.js 中单击按钮时从 select 选项中获取 selected 值

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 并将其用于 New 和 Used 按钮。相反 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
        });
    }
};

我想在 react.js 中单击按钮时从 select 选项中获取 selected 值

I want to get selected value from select options on button click in react.js

html

javascript

firebase

reactjs

dropdown