Question

我正在构建一个React应用程序，我需要存储我从应用程序打开的所有窗口的处理程序（你们有点奇怪，但这是我必须要做的）。在使用React之前，我将窗口存储在父窗口的全局数组中（我知道JS全局变量是一个非常糟糕的做法，但是在项目中已经指定了这样做）。

我不想使用Redux并尝试仅使用React解决此问题。

在新的React应用程序中，我在App组件的状态下声明了这个数组，以及一个操作我作为prop组件传递给子组件的stae的方法：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { name: 'Desktop', openedWindows: [] };        

    this.handleStateChange = this.handleStateChange.bind(this)
  }  

   handleStateChange(param) {
     this.setState({
     openedWindows: [
       ...this.state.openedWindows,
       param
     ]
})

}

  render() {   
    const themes = ['#2c2f33', 'teal']
    const backgroundColor = themes[0]          

    return (
      this.state.name === 'Desktop' ?
      <div className='App'>
        <Header backgroundColor = {backgroundColor} />
        <Landing backgroundColor = {backgroundColor} 
          handleStateChange = {this.handleStateChange} />
        <Footer backgroundColor = {backgroundColor}/>
      </div>
      :
      <div className='App'>
        <Header backgroundColor = {backgroundColor} />
      </div>
    )
  }
}

export default App;

这是尝试更改状态的子组件：

class Landing extends Component {
    handleOpenWindow = () => {     
        let newWindow = window.open('', '_blank')
        this.props.handleStateChange= this.props.handleStateChange.bind(this)
    }

    render () {
        const { backgroundColor } = this.props
        return (            
            <div className='landing'>
                <button className='btn' 
                    onClick={this.handleOpenWindow}
                    style={{backgroundColor}}
                >Abrir Editor
                </button>

            </div>
        )
    }
}

export default Landing

我得到一个TypeError：必须在函数上调用Bind

我在函数的调用上尝试了不同的方法，但是我无法让它工作。不知道我做错了什么，或者如果不使用Redux就可以。

感谢您的建议。

Answer 1

有两个问题：

构造函数中有一个拼写错误：this.handleStateChange.bind.bind(this) 那是一个.bind太多了。

在handleStateChange(param)状态更新错误：它应该是

this.setState({
  openedWindows: [
    ...this.state.openedWindows,
    param
  ]
})

Answer 2

您必须在子组件的handleOpenWindow()中进行更改，例如

    handleOpenWindow = () => {     
        let newWindow = window.open('', '_blank')
        this.props.handleStateChange(newWindow);
    }

您必须将打开的窗口对象作为参数传递回父级，并且您不需要在此处绑定它。休息看起来不错。

Answer 3

父组件

//在状态中创建一个数组。

`constructor(props){
     this.state={
         name:[]
     } 
 }`

现在创建一个接受数组作为参数和setState

的函数

handleChange=(value)=>{
    this.setState({name:value});
}

现在将该函数作为prop传递给子组件，然后您可以从子组件传递值（参数），最终在父组件中执行setState

子组件

`setData=()=>{
    let name=[1,2,3,4];
    this.props.handleChange(name); 
 }`

确保将该函数传递给子组件。这将帮助您从子组件中设置父级的状态。

从子组件修改父数组 - React

3 个答案: