Question

我有一个关于将状态变量传递给React函数的问题。以下面的代码为例：

export interface INumberProps {
    mynumber: number,
    show: boolean
}

var updateNumber = function() {

}

export function GetNumber(props: INumberProps) {
    return (
        <div>
            <label>Enter a number: </label>
            <input type="text" value={props.mynumber} />
            <button onClick={updateNumber} />
        </div>
    );
}

然后在主页上显示以下内容：

{this.state.showNumberQuery &&
    <GetNumber mynumber={this.state.mynumber} />
}

有效地，我想要做的是将状态变量传递给函数，并简单地让函数通过更改变量来更改状态。我知道这些函数不能显式更改状态，但是这样的操作是否可以隐式工作？

Answer 1

这是lifted state的情况。 GetNumber子组件无法直接修改状态，应提供setter回调：

<GetNumber
  mynumber={this.state.mynumber}
  updateNumber={mynumber => { this.setState({ mynumber }) }}
/>

在孩子中可以用作props.updateNumber(42)。

通过React中的props传递状态

1 个答案: