如何将值从函数传递到另一个文件中的另一个组件

Question

I'm making a react application that shows details about the pokemon you searched. So I have a Home component which has an input field + submit button. I want to render my api call in my Main component.

The question that I have is : How can I pass the value from this input field that is located in my home component to my main component when I enter submit?

home component details

I need this value to update my pokemon name state in my Main component in order to get the pokemon name for my fetch call.

I need this value to be stored inside my 'searchValue' state. Main component details

any tips?

Answer 1

One of the ways you can achieve this by Using ref in reactjs , Inside your Main Component you need to make a reference, like :

componentDidMount() {
    this.props.onRef(this);
}

// Delete the reference once component is unmounted

componentWillUnmount() {
    this.props.onRef(undefined);
}

And then create a method , which will receive the values from a the Home component and then setState like :

method(values) {
    this.setState({ searchValue: values });
}

Now inside your Home component you need to reference method component before your input like , (You can amend it accordignly)

import Home from './Home'

<Home onRef={ref => (this.home = ref)} />
<Form onSubmit={e => { this.onSubmit(e) }}

Make sure to add onSubmit method inside main component which will send the values to Home Component

onSubmit = values => {
    this.home.method(values);
}

You can read more about Ref and the DOM on React Documentation

Answer 2

I would propose you to take a look at redux which is great tool for state management. Redux will ensure you have a single source of truth.

What you will have to do is create an Action which would dispatch an event to update the state, a Reducer which would update the state (value of the search-key in redux-store ). Your Main component will read the data from the API (Same Action - Reducer way) & render it without having to bother about the current state. I can explain the whole architecture in detail if you are more interested. This architecture will have less bugs & clear flow of information including shared state between components.

I know this sounds bit too complex but its worth a try if your application is growing.

Few suggestions: Your Main component has too much of logic. Components should have least logic as possible so they are more deterministic. Please also read about React Stateless functional components

Here are some links if you wish to take redux path

• 10-tips-for-better-redux-architecture
• Redux Best Practices