代码之家  ›  专栏  ›  技术社区  ›  Klisiu

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

  •  0
  • Klisiu  · 技术社区  · 8 年前

    我不明白为什么我不能在我的父组件中获取数据。

    我有 组件- 添加按钮 小孩 组件- AddTasktBox . 我想把头衔从孩子传给父母。

    AddButton组件中可能存在错误-因为浏览器会出现以下错误:

    “TypeError:\u this2.props.sendData不是函数”

    只要看看submit-input“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 回复  |  直到 8 年前
        1
  •  0
  •   arthurakay    8 年前

    你没有通过 sendData() 作为支撑 AddTaskBox

    <AddTaskBox sendData={this.sendData} />