選擇並更改ReactJS中的特定元素

Question

我試圖在ReactJS中切換兩個按鈕的顏色。 我可以將選定按鈕的活動狀態屬性設置為“確定”，但是我無法根據如何選擇（calcX）來確定如何更改另一個按鈕的樣式（calcY）。

代碼很脆弱，但是我很新來做出反應，任何有關最佳實踐的指針都將不勝感激。 附言：我也正在為窗體和按鈕使用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

您可以基於組件（或子組件）的狀態設置className或樣式。 最好在這里使用三元運算符和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 ，則將添加btn-info類。 否則，將添加btn-default 。

因此，您現在唯一要做的就是在handleChange方法中設置狀態，並且將適當地呈現classNames。

編輯：在這里實際上不需要使用引用。 幾乎不需要使用引用。 您想使用React事件（onChange，onSubmit等）在狀態上設置輸入值，並在輸入的value中呈現這些值。 這些稱為受控組件。 您可以在官方文檔中了解更多信息： https : //facebook.github.io/react/docs/forms.html