如何在Reactjs中創建動態字段

Question

我是React.i的新手，有一個場景就像有一個選擇語句有四個選項。基於用戶從下拉列表中選擇一個選項，我需要創建一個動態輸入字段一行並將其附加到包裝元素。 動態字段我創造將是四個options.the用戶的不同而有所增加輸入字段，以及刪除輸入字段的能力，你在這裏看到的http://formvalidation.io/examples/adding-dynamic-field/

但是在上面我們可以添加和補充刪除相同類型的輸入字段。在我的情況下動態字段將基於選項selected.so專家在那裏plz指導我如何我可以在Reactjs中實現此功能

Answer 1

總之，可以通過觸發一個onchange事件在你選擇的元素上。這不是完全清楚你問做什麼，但我相信它類似於這種情況的東西

class Form extends Component { 
    constructor() { 
    super() 
    this.state = { 
     options: [] 
    } 
    } 

    addOperation(e) { 
    const selectedValue = this.refs.selection.value 
    const currentOptions = this.state.options 
    currentOptions.push(selectedValue); 

    // append selected value to the state's options array on every change 
    this.setState({ options: currentOptions }) 
    } 

    renderRows() { 
    // this is where you'll define each type of row 
    this.state.options.map((option, index) => { 
     if (option === "add") { 
     return (
      <tr class="form-row" key={index}> 
      <td>Adjust Price (Add)</td> 
      <td> 
       <label> 
       Add 
       <input type="text" placeholder={option} /> 
       </label> 
       to 
       <select> 
       <option value="option1">option1</option> 
       <option value="option2">option2</option> 
       <option value="option3">option3</option> 
       </select> 
      </td> 
      <td> 
       <button>Remove</button> 
      </td> 
      </tr> 
     ) 
     } else if (option === "multiply") { 
     return (
      <tr class="form-row" key={index}> 
      <td>Adjust Price (Multiply)</td> 
      <td> 
       <label> 
       Multiply 
       <input type="text" placeholder={option} /> 
       </label> 
       to 
       <select> 
       <option value="option1">option1</option> 
       <option value="option2">option2</option> 
       <option value="option3">option3</option> 
       </select> 
      </td> 
      <td> 
       <button>Remove</button> 
      </td> 
      </tr> 
     ) 
     } else if (option === "equals") { 
     // return a different row here 
     } else if (option === "not equals") { 
     // return a different row here 
     } 
    }) 
    } 

    render() { 
    return (
     <form> 
     <div className="appended-inputs"> 
      {renderRows.bind(this)} 
     </div> 
     <select name="select" id="select" ref="selection"> 
      <option value="add">Adjust Price (Add)</option> 
      <option value="multiply">Adjust Price (Multiply)</option> 
      <option value="equals">Filter Products (equals)</option> 
      <option value="not equals">Filter Products (not equals)</option> 
     </select> 
     <button onClick={addOperation.bind(this)}>Add Operation</button> 
     </form> 
    ) 
    } 
} 

本質上這裏發生了什麼是我們存儲上的組件狀態選項的數組，初始爲空。現在當用戶選擇一些東西並添加一個操作時，它會被添加到狀態數組中。在renderRows函數中，你有一系列if/if else來決定返回哪一行，或者你可以使用一個開關塊。

因此，現在當用戶在下拉列表中選擇某些內容並單擊添加操作時，會立即追加一個新的輸入字段。