如何从 ReactJs 中的另一个组件调用 setState [英] How do I call setState from another Component in ReactJs

问题描述

我有两个反应组件，我想调用 setState 在一个组件中设置状态，但在另一个组件中调用.我该怎么做?

解决方案

如果你使用函数式组件，你可以使用像 useState 这样的钩子.不要忘记保存"使用 useCallback (memoize) 处理程序的引用，它有助于 React 避免无用的重新渲染.

功能组件解决方案

//myContainer.js从反应"导入反应，{ useState}从 'some/path/myChild' 导入 MyChild功能我的容器(){const [name, setName] = useState('foo')返回 (<MyChild name={name} onNameChange={setName}/>)}导出默认 MyContainer//myChild.js导入反应，{ useCallback } from 'react'功能我的孩子({名称，onNameChange}){常量handleInputChange = useCallback(事件=> {onNameChange(event.target.value)}, [onNameChange])返回 (
<输入类型=文本";onChange={handleInputChange} 值={name}/><div>名字是:{name}</div></div>)}导出默认 MyChild

在一个类中，您可以使用包含一些逻辑或函数调用的处理程序(方法).它有助于保持代码的可维护性.

类组件解决方案

//myContainer.js从反应"导入反应，{组件}从 'some/path/myChild' 导入 MyChild类 MyContainer 扩展组件 {状态 = {名称:富"}handleNameChange = 名称 =>{this.setState({ name })}使成为() {返回 (<我的孩子名字={this.state.name} onNameChange={this.handleNameChange}/>)}}导出默认 MyContainer//myChild.js从反应"导入反应，{组件}类 MyChild 扩展组件 {处理输入更改 = 事件 =>{this.props.onNameChange(event.target.value)}使成为() {返回 (
<输入类型=文本";onChange={this.handleInputChange} 值={this.props.name}/><div>名字是:{this.props.name}</div></div>)}}导出默认 MyChild

I have two react components and I'd like to call setState to set a state in the one Component but called in the other one. How do I do that?

解决方案

If you work with functional components you can use hooks like useState. Don't forget to "save" (memoize) the reference of your handler with useCallback, it helps React avoid useless rerenders.

Functional component solution

// myContainer.js
import React, { useState } from 'react'
import MyChild from 'some/path/myChild'

function MyContainer() {
  const [name, setName] = useState('foo')

  return (
    <MyChild name={name} onNameChange={setName} />
  )
}

export default MyContainer

// myChild.js
import React, { useCallback } from 'react'

function MyChild({ name, onNameChange }) {

  const handleInputChange = useCallback(event => {
    onNameChange(event.target.value)
  }, [onNameChange])

  return (
    <div>
      <input type="text" onChange={handleInputChange} value={name} />
      <div>The name is: {name}</div>
    </div>
  )
}

export default MyChild

In a class you can use handler (method) that contains some logic or function call(s). It help to keep your code maintainable.

Class component solution

// myContainer.js
import React, { Component } from 'react'
import MyChild from 'some/path/myChild'

class MyContainer extends Component {
  state = {
    name: 'foo'
  }

  handleNameChange = name => {
    this.setState({ name })
  }

  render() {
    return (
      <MyChild name={this.state.name} onNameChange={this.handleNameChange} />
    )
  }

}

export default MyContainer

// myChild.js
import React, { Component } from 'react'

class MyChild extends Component {

  handleInputChange = event => {
    this.props.onNameChange(event.target.value)
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleInputChange} value={this.props.name} />
        <div>The name is: {this.props.name}</div>
      </div>
    )
  }

}

export default MyChild

这篇关于如何从 ReactJs 中的另一个组件调用 setState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！