ReactJS：在 child 和 parent 之间传递数据

Question

我不明白为什么我的 parent 组件无法获取数据。

我有 parent 组件 - AddButton 和 child 组件 - AddTasktBox。我想将标题从 child 传递到 parent。

AddButton 组件可能有问题 - 因为浏览器给我这样的错误：

"TypeError: _this2.props.sendData is not a function"

只需查看提交 - 输入 "onClick={this.handleClick}"（底部） - 开始我的代码以通过

import React from 'react';
import ReactDOM from 'react-dom';

class AddButton extends React.Component{

  constructor(props){
    super(props);

    this.state = {
      isHidden: false,
      title: '',
    };
  }

  sendData = (data) => {
    console.log(data);
    this.setState({
      title: data
    })
  };

  toggleHidden = () => {
      this.setState({
        isHidden: !this.state.isHidden
      })
  }

  render(){
    return(
      <div>
        <div
          onClick={this.toggleHidden.bind(this)}
          className="addtask__btn">
          +
        </div>
        {this.state.isHidden && <AddTaskBox handleClose={this.toggleHidden.bind(this)} handleClick={this.sendData.bind(this)}/>}
      </div>
    );
  }
}

class AddTaskBox extends React.Component{
  constructor(props){
      super(props);

      this.state = {
        title: '',
        description: ''
      };

      this.handleChange = this.handleChange.bind(this);
      this.handleClick = this.handleClick.bind(this);
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })

  }

  handleClick = () => {
    this.props.sendData(this.state.title);
  }

  render(){
    return(
      <div className="addtask__box" >
        <div className="addtask__close" onClick={this.props.handleClose}>X</div>
        <form >
          <input
            type="text"
            name="title"
            placeholder="Nazwa Czynności"
            value={this.state.title}
            onChange={this.handleChange}/>

          <textarea
            name="description"
            value={this.state.description}
            onChange={this.handleChange}
            placeholder="Opis czynności">
          </textarea>

          <input
            className="btn"
            type="submit"
            value="submit"
            onClick={this.handleClick}/>
        </form>
      </div>
    );
  }
}

export {AddButton, AddTaskBox};

Answer 1

您没有将 sendData() 作为道具传递给 AddTaskBox

<AddTaskBox sendData={this.sendData} />

ReactJS：在 child 和 parent 之间传递数据

ReactJS: Passing data between child and parent

components

transfer

reactjs

info