javascript - 如何根据 ReactJs 中变量的大小为输入框着色？

Question

我有一个输入框是disabled 。它得到一个变量x有时是< 1或> 1 。我想用 red 为背景着色如果x > 1 , green如果x < 1和grey作为默认值( without a value )。我试过这个:

    <Field name="testValue" type="number" component={Input} label="Value:"
 onChange={this.changeColor()} id="test"/>

方法changeColor() :

changeColor() {
        let num = document.getElementById("test");
        if(myValue === "") {
            num.css("backgroundColor", "grey");
        } else if(myValue  < 1) {
            num.css("backgroundColor", "green");
        } else {
            num.css("backgroundColor", "red");
        }
    }

以及constructor :this.changeColor = this.changeColor.bind(this);不幸的是我得到:Cannot read property 'css' of null我做错了什么？这是正确的方法吗？非常感谢任何帮助或建议。

Answer 1

onChange 需要一个函数，但您正在分配该函数返回的值，而不是像这样编写:删除 ():

<Field 
   name="testValue" 
   type="number" 
   component={Input} 
   label="Value:"
   id="test"
   onChange={this.changeColor} 
/>

但我建议你在样式标签上使用这些条件，而不是使用 document.getElementById('text') 然后在其上应用 css，我们应该避免使用 React 直接操作 dom。

将输入字段的值存储在状态变量myValue中，然后像这样编写:

changeBGColor() {
    let myValue = this.state.myValue;
    if(myValue === "") {
        return "grey";
    } else if(myValue  < 1) {
        return "green";
    } else {
        return "red";
    }
}

<Field 
   name="testValue" 
   type="number" 
   style={{backgroundColor: this.changeBGColor()}}
   component={Input} 
   label="Value:"
   id="test"
   onChange={this.changeColor} 
/>