我不明白为什么我不能在我的父组件中获取数据。
我有
组件-
添加按钮
小孩
组件-
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};