reactjs - 当使用离子反应从选择框中选择其他选项时显示输入字段

Question

使用 Ionic 和 React，当用户从位置字段选择框中选择选项“其他”时，我想为用户提供一个选项以输入添加位置字段。

                <IonItem lines="none">
                  <IonLabel position="stacked">Location</IonLabel>
                  <IonSelect>
                    <IonSelectOption value="dhaka">Dhaka</IonSelectOption>
                    <IonSelectOption value="cumilla">
                      Cumilla
                    </IonSelectOption>
                    <IonSelectOption value="barisal">
                      Barisal
                    </IonSelectOption>
                    <IonSelectOption value="sylet">Sylet</IonSelectOption>
                    <IonSelectOption value="other">Other</IonSelectOption>
                  </IonSelect>
                </IonItem>

                <IonItem lines="none">
                  <IonLabel position="stacked">Add Location</IonLabel>
                  <IonInput type="text" className="custom-input"></IonInput>
                </IonItem>

标签： reactjsionic-framework

Answer 1

生病给你的想法：

const Options = ()=>{
 const [select,setSelect]= React.useState();

  //handler function
 const handleCapacity=(e)=>{
   setSelect(e.target.value);
 }
 return (
  <React.Fragment>
    <select value={select} onChange={handleCapacity}>
          <option>1</option>
          <option>2</option>
          <option>other</option>
    </select>
    {select==="other"&& <input type="text"/>}
   </React.Fragment>
 )
}

ReactDOM.render(
  <Options />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>