在動態輸入字段中處理 select 標簽的 state 反應

Question

我不明白為什么注冊了 state 但它對床的預期價值沒有影響。 這是主要組件

const options = ["1", "2", "3"];
class Apps extends React.Component {  
  constructor(props) {    
    super(props)
    this.state = { 
       formValues: [{ name: "", email : "" ,beds:[options[0]]}]
     };
    
  }  
  handleChange(i, e) {
    let formValues = this.state.formValues;
    formValues[i][e.target.name] = e.target.value;
    this.setState({ formValues });
  }
  render() {
    const {formValues} = this.state;
    return (
        <PropertyType options={options} values={formValues}  handleChange={this.handleChange.bind(this)} />
    );
  }
}

這是屬性類型組件。 我不明白為什么它不起作用我嘗試了其他方法如果有人願意查看代碼請這樣做

function PropertyType({values,add,remove,options,handleChange,handleSubmit}) {

    return (
        <form  onSubmit={handleSubmit}>
          {values.map((element, index) => (
            <div className="form-inline" key={index}>
              <label>Name</label>
              <input type="text" name="name" value={element.name || ""} onChange={e => handleChange(index, e)} />
              <label>Email</label>
              <input type="text" name="email" value={element.email || ""} onChange={e => handleChange(index, e)} />
              <select 
                  value={element.beds} 
                  onChange={e => handleChange(index, e)}>
                    {options.map((value) => (
                      <option value={value} key={value}>
                        {value}
                      </option>
                    ))}
               </select>
              {
                index ? 
                  <button type="button"  className="button remove" onClick={() => remove(index)}>Remove</button> 
                : null
              }
            </div>
          ))}
          <div className="button-section">
              <button className="button add" type="button" onClick={() => add()}>Add</button>
              <button className="button submit" type="submit">Submit</button>
          </div>
      </form> );
}

Answer 1

您的 select 輸入沒有名稱，因此當您更改 select 值時，它會使用""名稱更新 state 參考值。

請注意下面的名稱值：

      <select  
                  name="beds"
                  value={element.beds} 
                  onChange={e => handleChange(index, e)}>
                    {options.map((value) => (
                      <option value={value} key={value}>
                        {value}
                      </option>
                    ))}
               </select>