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

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

2 个答案: