Question

我正在创建一个Quiz应用程序，以便学习React Native。

我希望当用户按下答案时，应禁用所有按钮。我不知道怎么做，我已经尝试了所有不同的方法，比如从父母改变按钮的道具，从父母等设置状态等等。我只是无法弄明白。我可以禁用单击按钮，但这并不起作用，因为其他按钮仍然可以点击。

父

class Container extends Component {
    state = { currentQuestion: questions[0] }
    buttons = new Array();

    componentWillMount() {
        this.makeButtons();
    }

    makeButtons() {
        for (let i = 0; i < 4; i++) {
            const isCorrect = (i === 0); //the first answer is correct, this is how I keep track
            const btn = (
                <Button
                    key={i}
                    title={this.state.currentQuestion[i]}
                    isCorrect={isCorrect}
                />
            );
            this.buttons.push(btn);
        }
        shuffle(this.buttons);
    }

    render() {
        return (
            <View style={containerStyle}>
                <Text style={textStyle}>
                    {this.state.currentQuestion.title}
                </Text>

                {this.buttons}
            </View>
        );
    }
}

按钮

class Button extends Component {
    state = { color: "rgb(0,208,196)" };

    handleEvent() {
        const newColor = (this.props.isCorrect) ? "green" : "red";
        this.setState({ color: newColor });
        this.props.onPress();
    }

    renderButton() {
        return (
            <TouchableOpacity
                style={buttonStyle}
                onPress={this.handleEvent.bind(this)}
                disabled={this.props.disabled}
            >
                <Text style={textStyle}>
                    {this.props.title}
                </Text>
            </TouchableOpacity>
        );
    }

    render() {
        return this.renderButton();
    }
}

Answer 1

在父组件加载时，您正在实例变量中创建按钮组件，但从不重新呈现它们。这是React的反模式。理想情况下，您的组件应该全部在render（）中呈现，并且它们的props应该从state计算，因此您只需要担心正确更新状态并正确呈现所有组件。

在这种情况下，您应该在组件加载时为按钮构建数据，在状态中保存按钮数据，并在render（）中渲染按钮。向Button组件添加“禁用”状态，当用户按下其中一个按钮时，使用回调在父组件中设置“禁用”状态，并且所有按钮将重新呈现以正确禁用。

禁用父级按钮

1 个答案: