reactjs - 在 React 组件中更改 borderColor

Question

如何通过单击另一个按钮来更改组件的颜色。我试图通过设置状态来做到这一点，但这是不可能的。在这个组件 SecondAnotherBox 中，属性中没有样式。

var AnotherBox = React.createClass({
    boxclick: function()
    {
        //change from here
    },
    render: function()
    {
        return(
        <div onClick={this.boxclick}> anotherbox</div>)
    }
});
var SecondAnotherBox = React.createClass({//change this
    render: function()
    {
        return(
        <div> secondanotherbox</div>)
    }
});
var ComplexBox = React.createClass({
    render: function()
    {
        return(
        <div>
        <AnotherBox />
        <SecondAnotherBox />
        </div>)
    }
});
ReactDOM.render(
  <ComplexBox />,
  document.getElementById('test')
);

Answer 1

你有三个组件

ComplexBox 与 AnotherBox 和 SecondAnotherbox。

• 将您的状态保存在 ComplexBox 中。
• 将您的 boxClick 功能移动到 ComplexBox
• 将属性 onBoxClick 添加到 AnotherBox 并将 onClick 连接到 { this.props.onBoxClick }
• 将属性添加到 SecondAnotherBox 颜色并使用“ComplexBox.state.color”作为值
• 在boxClick函数中改变“ComplexBox.state.color”

在代码中看起来像这样......

    var AnotherBox = React.createClass({

        render: function()
        {
            return(
            <div onClick={this.props.onBoxClick}> anotherbox</div>);
        }
    });

    var SecondAnotherBox = React.createClass({//change this
        render: function()
        {
            return(
            <div style={{ borderColor: this.props.color }}> secondanotherbox</div>);
        }
    });

    var ComplexBox = React.createClass({
        getInitialState: function() {
            return {
                color: 'blue'  
            };
          },
        boxclick: function()
        {
            //change from here
            var newColor = this.state.color == 'red'?'blue':'red'; 

            this.setState({
                color: newColor
            })
        },
        render: function()
        {
            return(
            <div>
                <AnotherBox onBoxClick={this.boxclick} />
                <SecondAnotherBox color={this.state.color} />
            </div>);
        }
    });

    ReactDOM.render(
      <ComplexBox />,
      document.getElementById('test')
    );