React-使样式对象可全局访问

Question

我正在开发一个基本的颜色选择器应用程序，以学习React并对其有更好的理解。

这种工作方式是我有一个文本字段，该文本字段接受十六进制值，并在您键入时将其显示为背景色。 我想发生的事情是，当您清除文本字段时，背景默认不返回。 现在，它恢复为以前输入的颜色。到目前为止，我的功能代码如下：

class ColorPick extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      color: "Let's pick a color"
    };
  }

  changeColor(event) {
    var colorInput = document.getElementById('colorInput').value;
    this.setState({
      color: event.target.value
    });
    if (colorInput === '') {
      this.setState({
       color: "Let's pick a color",
        backgroundColor: "#fff"
      });
   }
  }

  render () {
    var styleObj = {
      backgroundColor: this.state.color,
    };

    return (
      <section style={styleObj} id="Profile" >
        <h2 className="colorHeader">{this.state.color}</h2> 
        <input id="colorInput" placeholder="Enter Hex Code Here"     onChange={this.changeColor.bind(this)}/>
      </section>
    );
 }
   }

ReactDOM.render(<ColorPick />, document.getElementById('app'));

为了用空的文本字段在彩色背景上实现清除，我试图对变量/对象styleObj进行全球化，并将其值更改为具有backgroundColor: none如果字段的值为空白，则为backgroundColor: none 。 随之而来的是，我使用let声明。 为此，我尝试了以下操作：

class ColorPick extends React.Component {
  // making styleObj global and changing from var to let.
  let styleObj = {
    backgroundColor: this.state.color,
  };

...

changeColor(event) {
    var colorInput = document.getElementById('colorInput').value;
    this.setState({
      color: event.target.value
    });
    if (colorInput === '') {
      this.setState({
        color: "Let's pick a color",
        backgroundColor: "#fff"
      });
      // attempting to reset back to default after text field is cleared
      let styleObj = {
        backgroundColor: none,
      };
    }
  }

但是，发生了两个意外的结果：

1. 将styleObj为全局对象变量后，该组件从页面中完全消失

2. backgroundColor成为意外的标识符。

是否不应该让CSS阻止全局变量/对象就可以在整个范围内访问？ 我还尝试过更改变量的特定位置，范围从组件创建的正下方到render方法的正上方。 我应该以其他方式这样做吗？

以下是两个派生版本：功能版本和不适用于注释的版本：

工作版本： https ： //codepen.io/kawnah/pen/EZqLaq？editors = 0010

非工作版本： https ： //codepen.io/kawnah/pen/XpvOpp？editors = 0010

编辑：如您所见，对于我的颜色状态占位符，我正在使用字符串。 期望打破，它成功了。 为什么？

Answer 1

问题在于您仅在render()函数中使用this.state.color 。 这意味着当框为空时，您尝试将CS​​S background-color为"Let's pick a color" 。

您还仅将this.state.color设置为响应更改事件。 但是然后当您要重置它时（当colorInput === '' ），您可以设置this.state.color 和 this.state.backgroundColor吗？ 您需要从一开始就设置this.state.backgroundColor ！

旁注：您应该诚实地将this.state.color重命名为this.state.colorLabel或更好的this.state.headingLabel或类似名称。 它仅用于标签，而不用于颜色。 因此，将其称为“ color导致混淆，如在其他一些答案中所见。

所以你要：

changeColor(event) {
    var colorInput = document.getElementById('colorInput').value;
    this.setState({
      color: event.target.value,
      backgroundColor: event.target.value
    });
    if (colorInput === '') {
      this.setState({
        color: "Let's pick a color",
        backgroundColor: "#fff"
      });
    }
  }

和

render () {
    var styleObj = {
      backgroundColor: this.state.backgroundColor,
    };

    return (
      <section style={styleObj} id="Profile" >
        <h2 className="colorHeader">{this.state.color}</h2> 
        <input id="colorInput" placeholder="Enter Hex Code Here" onChange={this.changeColor.bind(this)}/>
      </section>
    );
  }

https://codepen.io/anon/pen/Qdeodv?editors=0010

甚至有更好的方法来重构它，但这只是基本的解决方法。