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该字段的值为空白。与此同时，我使用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,
      };
    }
  }

然而，发生了两个意外结果：

将styleObj作为全局对象变量后，该组件从页面中完全消失
backgroundColor成为意外的标识符。

是否不允许整个范围访问CSS阻止全局变量/对象？我还尝试更改变量的具体位置，从组件创建的正下方到render方法的正上方。我应该以不同的方式做这件事吗？

以下是两个分叉，功能版本以及不支持评论的版本：

工作版： https://codepen.io/kawnah/pen/EZqLaq?editors=0010

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

编辑：正如您所看到的，对于我的颜色状态的占位符，我使用了一个字符串。期待打破，它起作用了。为什么呢？

Answer 1

问题是您只在this.state.color功能中使用render()。这意味着当该框为空时，您尝试将CSS background-color设置为"Let's pick a color"。

您还仅设置this.state.color以响应更改事件。但是当你去重置它时（colorInput === ''时），你设置this.state.color AND 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

有更好的方法来重构这个，但这只是基本的解决方案。

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

1 个答案: