Question

好的，所以我正在使用一些颜色选择器来更改我的this.state.colorPicked并且可以正常工作，现在我有一个输入字段，我想编写一个可以调用的函数，该函数可以连接如果状态为空，则为colorPicked状态；如果不是，则为concat逗号；如果不是，则为状态值，如何访问此输入字段？我正在使用react-bootstrap


            <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

要访问输入值，可以在输入上使用onChange方法，将事件传递给它，然后通过event.target.value访问它。它看起来应该类似于：

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

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

Answer 2

对于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})



}

我不明白您想做什么。但这就是在处理表单时的基本方法。双向绑定

反应-从状态更改输入值

2 个答案: