Реакция - изменение входного значения из состояния

Question

Хорошо, поэтому я использую палитру цветов, которая меняет мой this.state.colorPicked и работает нормально, теперь у меня есть поле ввода, которое я хотел бы написать функцию, которую я могу вызвать, которая бы соответствовала значениюмое состояние colorPicked, если оно было пустым, или конкат-запятая и это значение, если это не так, как я могу получить доступ к этому полю ввода?Я использую реагирующую загрузку

            <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

Для форм реагирования мы используем двухстороннюю привязку из атрибутов state, onChange и value. Сначала добавьте атрибут value и установите его для свойства state для ex inputField.

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



}

Я не понял, что именно ты хотел сделать. Но это основной подход при работе с формами реагирования. Двухстороннее связывание

Answer 2

Чтобы получить доступ к входному значению, вы можете использовать метод onChange на своем входе, передать ему событие и получить к нему доступ через event.target.value.Это должно выглядеть примерно так:

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

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