Question

（我对React还是很陌生，因此如果这看起来很愚蠢，请您道歉）。

我有一个React控件，我只想选择一个按钮，然后禁用该按钮，然后启用另一个按钮；例如：

class MyControl extends Component<IMyControlProps> {

... 

    public render() {
        var isRunning = false;

        return (
            <Button name="btnStart" disabled={isRunning} onClick={ () => { 
                isRunning = true;
                this.props.RunningFunc;                 
            }}>Start Running</Button>
            <Button name="btnStop" disabled={!isRunning} onClick={ () => {
                isRunning = false;
                this.props.StopRunningFunc!
            }}>Stop!</Button>
 ...

但是，按下开始按钮对停止按钮的启用状态没有影响。是否需要调用方法或函数来强制刷新？

Answer 1

您应该使用状态变量！

赞：

return (
            <Button name="btnStart" disabled={this.state.isRunning} onClick={ () => { 
                this.setState({ isRunning: true });
                this.props.RunningFunc;                 
            }}>Start Running</Button>
            <Button name="btnStop" disabled={!this.state.isRunning} onClick={ () => {
                this.setState({ isRunning: false });
                this.props.StopRunningFunc!
            }}>Stop!</Button>

Answer 2

尝试将isRunning迁移到状态。当您更新状态时，将调用render函数，并且您的gui更新。

state = {isRunning: false};

public render() {
    return (
        <Button name="btnStart" disabled={this.state.isRunning} onClick={ () => { 
            this.setState({isRunning:true});
            this.props.RunningFunc;                 
        }}>Start Running</Button>
        <Button name="btnStop" disabled={!this.state.isRunning} onClick={ () => {
            this.setState({isRunning:false});
            this.props.StopRunningFunc;
        }}>Stop!</Button>

在React中启用和禁用表单元素

2 个答案: