用户选择一个选项并在 ReactJS 中按下提交后重新呈现选择选项

Question

我是 React 新手。我试图了解如何使用钩子和状态，但我遇到了一些麻烦。我在选择标签中显示了一些选项，在用户选择一个选项并单击提交后，我想从选项列表中删除该选项，而无需用户刷新。

<form onSubmit={handleSubmit} className="row valign-wrapper">
        <div className="input-field col s12 l6">

          <select className="browser-default" onChange={(e) => setSelected(e.target.value)} value={selected}>
            <option value="None">Select</option>
            { institutions.map(institution => (
              <option key={institution._id} value={institution._id}>{institution.name}</option>
            ))}
          </select>
        </div>
        <div className="col s12 l6">
         <button className="btn waves-effect waves-light indigo" type="submit">Apply</button>
        </div>
      </form>

Answer 1

只需将其添加到您的表单 onSubmit={(e)=>e.preventDefault()}