React - 从状态更改输入值

Question

好的，所以我正在使用一些颜色选择器来更改我的 this.state.colorPicked 并且效果很好，现在我有一个输入字段我想编写一个我可以调用的函数来连接值我的状态 colorPicked 如果它是空的，或者 concat comma 和那个值，如果不是，我如何访问这个输入字段？ 我正在使用反应引导

            <InputGroup className="mb-3">
              <FormControl
                name="color"
                onChange={this.change}
                placeholder="Available Colors"
                aria-label="Available Colors"
              />
            </InputGroup>
            <div style={{ display: "flex", "flex-direction": "row" }}>
              <TwitterPicker
                className="mb-3"
                onChange={this.handleColorChange}
              />
              <Button
                style={{
                  background: this.state.colorPicked
                }}
                onClick={() => this.addColor(this.state.colorPicked)}
              >
                Add Color!
              </Button>
            </div>

TIA

澄清：我想选择颜色，onchange 检测器将其设置为状态，因此按钮的背景，现在在按钮单击时，我想将它的十六进制（状态）添加到文本字段作为文本输入，如果输入不是空的，我会在它前面加上逗号。

Answer 1

对于 react 表单，我们使用状态、onChange 和 value 属性的两种方式绑定。 首先添加 value 属性并将其设置为 ex inputField 的 state 属性。

<FormControl
   name="color"
   onChange={this.change}
   placeholder="Available Colors"
   aria-label="Available Colors"
   value=={this.state.inputField}
   />

现在您可以在更改函数中编写逻辑......类似

change = (e)=>{

 this.setState({inputField:e.target.value}
 // then copy array from state
 let arrFromState = [...this.state.colorPicked]
 let updatedArray = [...arrFromState, this.state.inputField] 
 // or use concat, push etc
 this.setState({colorPicked:updatedArray})



}

我不明白你想要做什么。 但这是使用 React 表单时的基本方法。双向绑定

Answer 2

要访问输入值，您可以在输入上使用 onChange 方法，将事件传递给它并通过 event.target.value 访问它。它应该看起来像这样：

<input onChange={(event) => logInputValue(event)}

const logInputValue = ({ event: { target: { value } = {} } }) => { console.log(value) }