如何在 React 的循环中使用 select 标签的 selected 属性

Question

当我们有像这样的单独选项时，这很容易：

<select name="phone_type" id="phone_type">
  <option value="mobile" selected>Mobile</option>
  <option value="home">Home</option>
  <option value="office">Office</option>
</select>

但在我的例子中，我使用循环来执行此操作：

phoneTypes = ['Mobile', 'Home', 'Office'];
...
<select onChange={(e) => this.handleChangePhonetype(e, index)}>
  {this.phoneTypes.map((phoneType, index) => {
    return (
      <option key={index} value={phoneType} name="type">
        {phoneType}
      </option>);
   })}
</select>

我在互联网上进行了搜索，但没有找到关于 React 的正确答案。我希望 'Mobile' 在页面加载时已经被选中。我不知道如何在 React 中执行此操作。请参与。

这里是 stackblitz.

Answer 1

您应该简单地使用每个 phone 对象的 type 作为 select 元素的值。

这是更新后的 stackblitz。

const PhoneTypes = ['Mobile', 'Home', 'Office'];

class Questionnaire extends Component {
  state = {
    phones: [{ type: 'Mobile', number: '' }],
  };

  addContact() {
    this.setState((prevState) => ({
      phones: [...prevState.phones, { type: 'Mobile', number: '' }],
    }));
  }

  handleChange({ target: { name, value } }, phoneIndex) {
    this.setState((prevState) => ({
      phones: prevState.phones.map((phone, index) =>
        phoneIndex === index ? { ...phone, [name]: value } : phone
      ),
    }));
  }

  handleRemove(phoneIndex) {
    this.setState((prevState) => ({
      phones: prevState.phones.filter((_, index) => phoneIndex !== index),
    }));
  }

  handleSubmit(e) {
    console.log(this.state, '$$$');
  }

  render() {
    return (
      <div>
        <h1>The Form</h1>
        <label>Contact</label>
        {this.state.phones.map((phone, index) => {
          return (
            <div key={index}>
              <input
                onChange={(e) => this.handleChange(e, index)}
                value={phone.number}
                name="number"
              />
              <select
                name="type"
                value={phone.type}
                onChange={(e) => this.handleChange(e, index)}
              >
                {PhoneTypes.map((phoneType, index) => {
                  return (
                    <option key={index} value={phoneType}>
                      {phoneType}
                    </option>
                  );
                })}
              </select>
              <button onClick={(e) => this.handleRemove(index)}>Remove </button>
            </div>
          );
        })}
        <hr />
        <button onClick={(e) => this.addContact(e)}>Add contact</button>
        <hr />
        <button onClick={(e) => this.handleSubmit(e)}>Submit</button>
      </div>
    );
  }
}

我还修复了一些其他问题，例如改变状态、不正确的 arg 以删除函数等。

如何在 React 的循环中使用 select 标签的 selected 属性

How to use selected attribute of select tag in a loop in React

javascript

jsx

reactjs