React：抓取jQuery完成的输入值的变化

Question

不喜欢将jQuery与React混合，但我喜欢名为Farbstastic的颜色选择器，所以我将它作为一个组件嵌入到我的React应用程序中。 输入字段的类型为隐藏，当用户与颜色选择器进行交互时，值会发生变化。 我想使用onChange事件获取React中的值。

这是我的反应代码以获取更改：

class Color extends Component {    
    render() {
        return (
            <div>

                <label htmlFor="color">Color:</label>

                <input type="hidden" id="color" name="color" value="#123456"  onChange={event => { console.log(event.target.value);} }/>
                <div id="picker"></div>

            </div>
        )
    }
}

问题是它没有抓住jQuery对值的更改。

Answer 1

你的用例在反应世界中被称为不受控制的组件。 https://reactjs.org/docs/uncontrolled-components.html

所以基本上你必须使用ref来访问你的react类方法中这个输入的值。

      <input type="hidden" id="color" name="color" value="#123456" 
        ref={(input) => this.colorCodeInput = input}/>
      <div id="picker"></div>

现在，在提交功能中，您可以访问设置的值，如

onSubmit() {
  let colorCode = this.colorCodeInput.value.
}