javascript - 选择并更改 ReactJS 中的特定元素

Question

我正在尝试切换 ReactJS 中两个按钮的颜色。我可以设置所选按钮的事件状态属性，但我无法弄清楚如何根据我的选择(calcX)更改另一个按钮(calcY)的样式。

代码很脆弱，但我对 react 还很陌生，任何有关最佳实践的指示将不胜感激。 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

您可以根据组件状态的元素(或子组件)设置类名或样式。在这里使用三元运算符和 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 className。如果state.active是 true ，类(class)btn-info将被添加。否则btn-default将会添加。

所以你现在唯一要做的就是在 handleChange 中设置状态方法和类名将被适本地呈现。

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