Javascript 如何从Reactjs中的子组件获取多个值？

我想在父组件的单个方法中获得两个值。将道具值从子组件传递到父组件。什么是合适的解决方案

Form.js（子组件）

---

所以，根据上面的代码，如何从子组件获取这两个值？可能吗？任何建议或更改

有多种处理方法，但不能添加两个参数并用一个参数调用函数

一种方法是，如果建议和价值表现不同，可以添加一个标志

   onSuggestionSelected = (event, {suggestion}) => {
    const isSuggestion = true
    this.props.getWeather(suggestion, isSuggestion)
  }

  onClick = (e) => {
    e.preventDefault()
    const value = e.target.value
    const isSuggestion = false
    this.props.getWeather(value, isSuggestion)
  }

最后，在App.js（父组件）上进行小重构

---

根据我的意见，您可以将两个值合并为一个状态，然后将状态发送给父级，如下所示：

this.state = {
   suggestion: "",
   value: ""
}

执行两个功能时设置状态：

onSuggestionSelected = (event, {suggestion}) => {
    this.setState({...this.state, suggestion }, () => this.props.getWeather(this.state))
}

onClick = (e) => {
    e.preventDefault()
    const value = e.target.value
    this.setState({...this.state, value }, () => this.props.getWeather(this.state))
}

在父级，您可以获取从子级发送的对象：

getWeather = async (value) => {
    console.log(value)
    // Value here will be an object
}

---

您是否考虑过在React v.16中使用上下文提供程序？ 通过这种方式，您可以将处理程序和值存储在上下文提供程序中，并在不同组件中全局访问它们

App.js：

import React, { createContext } from 'react';

export const Context = createContext({
  suggestion: '',
  onSuggestionSelected: () => {},
  valueSelected: '',
  onClickHandler: () => {},
});

export class Provider extends React.Component {
  onSuggestionSelected = (suggestion) => {
    this.setState({ suggestion: suggestion.value });
  };

  onClickHandler = (valueSelected) => {
    this.setState({ valueSelected });
  };

  state = {
    suggestion: '',
    onSuggestionSelected: this.onSuggestionSelected,
    valueSelected: '',
    onClickHandler: this.onClickHandler,
  };

  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export const Consumer = Context.Consumer;

import React，{createContext}来自“React”；
export const Context=createContext({
建议：“，
onSuggestionSelected:（）=>{}，
所选值：“”，
onClickHandler:（）=>{}，
});
导出类提供程序扩展了React.Component{
onSuggestionSelected=（建议）=>{
this.setState（{suggestion:suggestion.value}）；
};
onClickHandler=（valueSelected）=>{
this.setState（{valueSelected}）；
};
状态={
建议：“，
onSuggestionSelected:this.onSuggestionSelected，
所选值：“”，
onClickHandler:this.onClickHandler，
};
render（）{
返回(
{this.props.children}
);
}
}
export const Consumer=Context.Consumer；

Form.js：

import React, { useContext } from 'react';
import { Context } from './App';

export default function Form() {
  const {
    suggestion,
    onSuggestionSelected,
    valueSelected,
    onClickHandler,
  } = useContext(Context);

  return (
    <>
      // Autosuggest Input Component // Here I get suggestion value
      <Autosuggest onSuggestionSelected={onSuggestionSelected} />
      // Button Component // Here I pass the input value to onClick method
      <MDBBtn
        type="submit"
        value={inputProps.value}
        onClick={(e) => onClickHandler(e)}
      >
        Search Weather
      </MDBBtn>
    </>
  );
}

import React，{useContext}来自“React”；
从“/App”导入{Context}；
导出默认函数表单（）{
常数{
建议,，
根据选举产生的建议，
价值选择，
onClickHandler，
}=使用上下文（上下文）；
返回(
//Autosuggest输入组件//这里我得到建议值
//按钮组件//这里我将输入值传递给onClick方法
onClickHandler（e）}
>
搜索天气
);
}

可能重复感谢您的解决方案。。。我甚至会试试这个

getWeather = async (value) => {
    console.log(value)
    // Value here will be an object
}

import React, { createContext } from 'react';

export const Context = createContext({
  suggestion: '',
  onSuggestionSelected: () => {},
  valueSelected: '',
  onClickHandler: () => {},
});

export class Provider extends React.Component {
  onSuggestionSelected = (suggestion) => {
    this.setState({ suggestion: suggestion.value });
  };

  onClickHandler = (valueSelected) => {
    this.setState({ valueSelected });
  };

  state = {
    suggestion: '',
    onSuggestionSelected: this.onSuggestionSelected,
    valueSelected: '',
    onClickHandler: this.onClickHandler,
  };

  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export const Consumer = Context.Consumer;

import React, { useContext } from 'react';
import { Context } from './App';

export default function Form() {
  const {
    suggestion,
    onSuggestionSelected,
    valueSelected,
    onClickHandler,
  } = useContext(Context);

  return (
    <>
      // Autosuggest Input Component // Here I get suggestion value
      <Autosuggest onSuggestionSelected={onSuggestionSelected} />
      // Button Component // Here I pass the input value to onClick method
      <MDBBtn
        type="submit"
        value={inputProps.value}
        onClick={(e) => onClickHandler(e)}
      >
        Search Weather
      </MDBBtn>
    </>
  );
}