props是已定义的，但下面是undefined

Question

Props在state中定义，但下面是undefined

嗨，我的代码有一个小问题。我想从子调用父函数，但错误说不能读取属性的定义。我把它改成了log这个。道具，但同样的错误。令人困惑的是，它是在它运行的状态下定义的this.props.inputValue转换为inputValue，我可以在那里使用它，它可以工作，但是在函数消息中按下按钮调用，未定义

孩子

class Search extends React.Component {
state = {
loading: true,
inputValue : this.props.inputValue
}
message(){
console.log(this.props)
// this.props.sendMessage("HI")
}
render() {
return (
<div className="row mb-3">

<div className="col-auto mb-3">

<label className="col-form-label text-center">Suche:</label>

</div>
<div className="col-md-3 mb-3">

<input id="Input" className="form-control" type="text" 
value={this.state.inputValue}
onChange={event => this.updateInputValue(event)}/>

</div>
<div className="col-md-auto mb-3">

<button id="add" onClick={this.message} className="form-control btn btn-success" >➕</button>

</div>

</div>
)
}
updateInputValue(event) {
this.setState({
inputValue : event.target.value
})
}
}
export default Search;

父母

class App extends Component {
state ={
title: "Benutzerdatensuche",
inputValue: "Suche",
value: "0"
}
render(){
return ( 
<div className = "App" >
<Header title={this.state.title} />
<Search inputValue={this.state.inputValue} sendMessage={this.message.bind(this)}/>
<InfoBox />
{this.state.value}
</div>
)}
message(text){
console.log(text)
}
}

我真的不明白为什么它不工作

Answer 1

由于您使用的是类组件，因此需要将onClick处理程序(this.message)绑定到类AKAthis。有两种常见的方法来实现绑定。

使用.bind

<button
id="add"
onClick={this.message.bind(this)}
className="form-control btn btn-success"
>
...
</button>

注意.bind(this)

带箭头函数

<button
id="add"
onClick={() => this.message()}
className="form-control btn btn-success"
>
...
</button>

这是因为this的上下文在JavaScript中工作的方式(不是特定于React)。参见docs: https://reactjs.org/docs/handling-events.html which state:

在JSX回调中必须小心这个的含义。在JavaScript中，默认情况下，类方法没有绑定。如果你忘了绑定这个。handleClick并将其传递给onClick，当函数实际调用时，这将是未定义的。

这不是特定于react的行为;它是JavaScript中函数工作方式的一部分。通常，如果您引用的方法后面没有()，例如onClick={this。handleClick}，你应该绑定那个方法。