如何将文本字段和下拉值推送到状态数组中

Question

我正在尝试呈现两个字段 text field 和 dropdown 。每当用户在文本字段中输入内容时，我都想更新它的状态。状态对象属性必须是对象数组，例如 [{textFieldType:'text', value:'Hello'}] 。我想对下拉列表做同样的事情[{textFieldType:'text', value:'Hello'},{textFieldType:'dropdown',value:'Hello'}] 意味着我想通过两个字段更新状态值。我是新手，有人可以帮帮我吗。

JSFiddle : https://jsfiddle.net/dy7zc3au/3/

代码

  state = {
    extraFields:[]
    }
    
   

      <td>
       <input
       type="text"
       className="inputStyle"
       placeholder={item.fieldName}
       value={optionalFields}
       />
     </td>
    <td>
    <select>
     <option>value 1</option>
     <option>value 2</option>
    </select>
    </td>

Answer 1

这里

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        optionalFields: {}
    }
  }
  change(e) {
    const optionalFields = this.state.optionalFields;
        optionalFields[e.target.type] = e.target.value;
      this.setState({optionalFields})
    }
  render() {
    return (
      <div>
        <h2>Optional Fields:</h2>
       <input type="text" placeholder="Enter Text" onChange={(e) => {this.change(e)}}/>
       <br/><br/><br/>
       <select onChange={(e) => {this.change(e)}}>
         <option>value 1</option>
         <option>value 2</option>
       </select>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

使用对象而不是数组更容易控制

示例：

{
  select-one: "value 1",
  text: "a"
}

Answer 2

选中此代码框。因为类型是select-one 而不是dropdown，所以代码更多。

https://codesandbox.io/s/ecstatic-wilson-fv5b8