Question

对于使用React构建网站来说，我还很陌生，但在尝试找出如何在单击单选按钮时动态更改div背景时遇到了一个问题。

在我最近一次尝试获得想要完成的单元示例的尝试中，我产生了以下代码：

const statuses = {
  "submitted": "blue"
}
style = {
    backgroundColor: "red"
  }

  render() {
    return (
      <div className="Employer">
        <h2>Employer</h2>
        <div className="status-wrapper">
          <div className="status-option">
            <input type="radio" value="progress" name="option" onChange={e => this.style['backgroundColor'] = statuses[e.target.value]} style={this.style}></input>
            <label>In Progress</label>
          </div>
        </div>
      </div>
    );
  }

我的主要组成部分以及状态如下：

state = {
  postings: [{
    id: 1,
    style: {backgroundColor: 'yellow'},
    name: "Google",
    status: 0
  }]
}

  render(){
    return (
      <div className="App">
        <Employer postings = {this.state.postings}></Employer>
      </div>
    );
  }

代码会导致“ TypeError：'backgroundColor'为只读”错误，我想这可能是由于未正确更新组件状态而导致的。

如果有人能帮助我解决这个问题，并希望能帮助我在此过程中了解更多有关React的信息，我将不胜感激！

Answer 1

您正在更新this.style不是状态对象。使用this.setState()函数调用也是如此。还可以使用this.state.style更改样式

Changer = e => {
let val = e.target.value;
this.setState(state => {
  state.style.backgroundColor = statuses[val];
  return state;
});
};

对于输入端

 <input type="radio"
              value="progress"
              name="option"
              onChange={this.Changer}
              style={{ ...this.state.style }}
            />
            <label style={{ ...this.state.style }}>In Progress</label>

选中此 Sandbox

如果要使用类，则是第一件事。因此，最好使用构造函数，而不要使用普通的state
您正在将颜色设置为输入单选按钮。但看不到该颜色。因此，请用标签来解决问题
要更改整个对象的样式，请使用传播操作符将对象复制到元素{...object}的样式中

ReactJS-单击单选按钮时动态更改组件的颜色

1 个答案: