反应:单击组件以更改父状态

Question

对React 来说很新，不知道如何解决这个问题。 我想单击一个组件(项目(并让它更改父项的状态，确定然后渲染的内容。

应用程序.js，在应用程序组件中，具有

constructor(props){
super(props);
this.state = {
load: ''
}
}
handleClick(e){
this.setState({load: e.target.value});
console.log("Clicked!");
console.log(e);
console.log(e.target.value);
}
display(load){
if (load === 'bmi') {
return <Bmi />
}
else return "";
}
render() {
return (
<div className="App">
<div className="App-header">
<h2>Projects</h2>
</div>
<div className="box">
<Project projectName="BMI Calculator"
projectDescription="A simple React program, using sliders to select weight and height to calculate BMI."
imgAddress="https://cdn.vertex42.com/ExcelTemplates/Images/bmi-chart.gif"
value="bmi"
onClick={this.handleClick}/>
<Project projectName="..."
projectDescription="..."
<Project projectName="Something Else"
projectDescription="Describing that other thing that I did." />
</div>
<div className={this.state.item}>
{this.display(this.state.item)}
</div>
</div>
);
}

Project从Project.js调用，它具有：

render(){
return(
<div className="third" value={this.props.value} onClick={this.props.onClick}>
<h3>{this.props.projectName}</h3>
<div className="container">
<img src={this.props.imgAddress} className="image" />
<div className="middle">
<div className="text">{this.props.projectDescription}</div>
</div>
</div>
</div>
)
}

当我单击第一个控制台时，控制台显示：

clicked!
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, nativeEvent: MouseEvent, type: "click", target: img.image…}
undefined

由于控制台中显示的目标：img.image，我尝试为该元素提供与div.three相同的值，onClick属性，但这不起作用。 然后我尝试将其提供给Project渲染中的所有元素.js但这也没有奏效。

Answer 1

如果在子组件中创建中间单击处理程序，则可以直接使用 props：

应用.js

handleClick (value) {
console.log('clicked', value);
this.setState({load: value});
}

项目.js

_onClick = () => {
this.props.onClick(this.props.value);
}
render() {
return (
<div className="third" onClick={this._onClick}>
<h3>{this.props.projectName}</h3>
<div className="container">
<img src={this.props.imgAddress} className="image" />
<div className="middle">
<div className="text">{this.props.projectDescription}</div>
</div>
</div>
</div>
);
}

在这里，_onClick直接使用道具，而不是处理事件。您需要对 es6 类使用属性初始值设定项语法，因为 es6 类不会自动绑定：_onClick = () => {}

Answer 2

您可以将函数作为道具从父级传递给子级。不要忘记使用 .bind(this(，它在您的项目中丢失了...在构造函数级别，或在组件级别使用 this.handleClick.bind(this(。您也可以使用 _handleClick 代替 handleClick(执行相同的操作(。

// PARENT
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = { name: 'bob' }
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
e.preventDefault()
this.setState({
name : 'anita'
})
}
render() {
return (
<div>
{this.state.name} 
<Child handleClick={this.handleClick} />
</div>
)
}
}
// CHILD
class Child extends React.Component {
render() {
return <button onClick={this.props.handleClick} />
}
}