javascript - react : Grab change on input value done by jQuery

Question

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

这是我获取更改的 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 获取 value 的变化。

Answer 1

您的用例在 react 世界中称为不受控制的组件。 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.
}