Select 并更改 ReactJS 中的特定元素

Question

我想在 ReactJS 中切换两个按钮的颜色。我可以将所选按钮的活动状态属性设置为确定，但我不知道如何根据我的选择（calcX）更改另一个按钮（calcY）的样式。

代码很脆弱，但我对反应还很陌生，任何有关最佳实践的指示都将不胜感激。 PS 我也在为表单和按钮使用 react-bootstrap。

const MyForm = React.createClass({

    handleChange(event, attribute) {
        let eventValue = event.target.value;
        if (attribute === 'calcX'){
            this.setState({active: true});
            this.setState({bsStyle: 'info'});
            let calcXBtn = ReactDOM.findDOMNode(this.refs.calcBtnGroup.refs.calcX);
            calcXBtn.setState({bsStyle: 'default'});
        }
        ...
    }

render() {
    return (
            <Form onSubmit={this.handleSubmit} horizontal>
                <FormGroup>
                    <ButtonGroup ref="calcBtnGroup">
                        <Button active className='btn btn-info'  ref="calcX" onClick={(event) => this.handleChange(event, 'calcX')}>Calculate X</Button>
                        <Button className='btn btn-default' ref="calcY" onClick={(event) => this.handleChange(event, 'calcY')}>Calculate Y</Button>
                    </ButtonGroup>
            ...

        );
    }
});

module.exports = MyForm;

Answer 1

您可以根据组件的状态设置class基于元素（或子组件）的名称或样式。很高兴在这里使用三元运算符和 ES6 模板文字。

<Button ref="calcX" className=`btn ${this.state.active ? 'btn-info' : 'btn-default'}` onClick={(event) => this.handleChange(event, 'calcX')}>Calculate X</Button>

它的作用是根据组件的状态设置 className。 <Button> 组件总是有一个 btn class 名称。如果 state.active 为 true，则将添加 class btn-info。否则将添加btn-default。

所以您现在唯一需要做的就是在您的 handleChange 方法中设置状态，class名称将被正确呈现。

编辑： 在这里使用 refs 并不是真的必要。几乎从不需要使用 refs。您希望使用 React 事件（onChange、onSubmit 等）来设置状态的输入值，并在输入的 value 中呈现这些值。这些被称为受控组件。您可以在官方文档中阅读更多相关信息：https://facebook.github.io/react/docs/forms.html

Select 并更改 ReactJS 中的特定元素

Select and change a specific element in ReactJS

javascript

reactjs

react-bootstrap