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

Question

我想在父组件的单一方法中获取两个值。将 props 值从子组件传递给父组件。什么是合适的解决方案？

1. Form.js（子组件）

 // First method -> Here I get the value in suggestion which is then
 // passed to Parent Component via props
  onSuggestionSelected = (event, {suggestion}) => {
    this.props.getWeather(suggestion)
  }

 // Second method -> Here is the value which I want to pass via 
 // props
  onClick = (e) => {
    e.preventDefault()
    const value = e.target.value
    this.props.getWeather(value)
  }

 // Autosuggest Input Component
 // Here I get suggestion value
 <Autosuggest
        onSuggestionSelected={this.onSuggestionSelected}
 /> 

 // Button Component
 // Here I pass the input value to onClick method
 <MDBBtn
        type="submit"
        value={inputProps.value} 
        onClick={e => this.onClick(e)}
  >
    Search Weather
  </MDBBtn>

1. App.js（父组件）

getWeather = async (suggestion, value) => {
    // Here I get suggestion values
    const city = suggestion.name;
    const country = suggestion.country;

    // Here I get undefined
    console.log('VALUE', value)
}

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

Answer 1

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

如果建议和价值的行为不同，一种方法可以是添加标志，

   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（父组件）的小重构

getWeather = (suggestionOrValue, isSuggestion) => {
    if(isSuggestion){
    //use suggestionOrValue as suggestion
}
else {
    //use suggestionOrValue as value
}
}

Answer 2

在我看来，您可以将两个值合并为一个状态，然后像这样将状态发送给 Parent：

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

执行两个函数时的setState：

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))
}

在 Parent，您可以获取从 Child 发送的对象：

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

Answer 3

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

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;

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>
    </>
  );
}