ReactJS:在孩子和父母之间传递数据[重复]

Posted

技术标签:

【中文标题】ReactJS:在孩子和父母之间传递数据[重复]【英文标题】:ReactJS: Passing data between child and parent [duplicate] 【发布时间】:2018-05-03 23:59:44 【问题描述】:

我不知道为什么我无法在我的父组件中获取数据。

我有 parent 组件 - AddButtonchild 组件 - AddTasktBox。我想将头衔从孩子传递给父母。

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

“TypeError:_this2.props.sendData 不是函数”

看看提交 - 输入“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;

【问题讨论】:

【参考方案1】:

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

<AddTaskBox sendData=this.sendData />

【讨论】:

以上是关于ReactJS:在孩子和父母之间传递数据[重复]的主要内容,如果未能解决你的问题,请参考以下文章

通过 Parent 传递的 prop 获取子组件的当前状态 - Reactjs

孩子与其父母之间的边距顶部[重复]

React:将状态从孩子传递到孩子再传递给父母

将数据从孩子传递给祖父母

无法正确地将值从父母传递给孩子和孩子传递给父母

将数据从孩子传递给父母,而无需加载事件,这可能在 vue 世界上吗?