Question

我知道这是一件很基本的事情，但是由于某种原因，我的脑子现在对我做错的事情只是一片空白。因此，基本上，Im想要做的就是单击一个按钮，每次单击该按钮，值就会增加1。我试图将“增量”按钮作为孩子，然后将新值传递给父母。

这是我的app.js（父级）

import React from 'react';
import IncrementButton from './increment-button';

export default class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        count: 0
    };
}

increment(){
    this.setState({
        count:this.state.count+1
    })
}

render() {
    return (
        <div className="parent">
            <div className="count">
                Number of clicks: {this.state.count}
            </div>
            <IncrementButton count={this.increment}/>
        </div>
    );
}
}

这是我的增量按钮组件

import React from 'react';

export default function IncrementButton(props) {

return <button onClick={() => props.count}>Increment</button>;
}

现在我看不到“点击次数：”的变化

Answer 1

由于它是一个函数，因此您必须调用count()-

<button onClick={() => props.count()}>Increment</button>;

Answer 2

props.count是一个函数，请调用它。

import React from 'react';

export default function IncrementButton(props) {

return <button onClick={() => props.count()}>Increment</button>;
}

同样对于您的app.js，您需要绑定this.increment的范围，因此请使用箭头功能。

import React from 'react';
import IncrementButton from './increment-button';

export default class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        count: 0
    };
}

increment(){
    this.setState({
        count:this.state.count+1
    })
}

render() {
    return (
        <div className="parent">
            <div className="count">
                Number of clicks: {this.state.count}
            </div>
            <IncrementButton count={() => this.increment()}/>
        </div>
    );
}
}

将传递增量数据反应给父级

2 个答案: