第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

我想從 React.js 中單擊按鈕的選擇選項(xiàng)中獲取選定的值

我想從 React.js 中單擊按鈕的選擇選項(xiàng)中獲取選定的值

慕姐8265434 2023-07-06 18:14:21
我想從單擊按鈕的下拉列表中獲取所選值,然后將其保存在 firebase 數(shù)據(jù)庫中。除了下拉菜單之外,一切都工作正常。我還想在 firebase 數(shù)據(jù)庫中添加一個(gè)下拉值。任何人都可以幫助我,我怎樣才能得到它?我正在嘗試,但它給出了錯(cuò)誤。有人可以幫助我嗎?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>
查看完整描述

1 回答

?
慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊

創(chuàng)建一個(gè)單獨(dú)的函數(shù)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);

      });

  };

此代碼將更改下拉列表,不會(huì)出現(xiàn)任何錯(cuò)誤。


如果您想使用相同的功能來管理兩者。以下是解決方案:


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

        });

    }

};


查看完整回答
反對 回復(fù) 2023-07-06
  • 1 回答
  • 0 關(guān)注
  • 212 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號