如何清除數組輸入表單字段中的輸入字段表單

Question

我的表單中有一個輸入字段，它是在 map 中生成的，如下所示：

每個“Valor”都來自這個 map。這是具有主要價值的不同問題，以及一系列 sinoms。

{itemsList.map((item, i) => (                  
              <>                
                <div className="row align-items-center"  key={i}>    
                  <div className="row mt-3">
                    <div className="col-md-2">
                      <label htmlFor="link_title" className="form- 
            label text-center mt-1" >
                        <h5> {i + 1}- Valor de la Lista: </h5>
                      </label>
                    </div>         
                    <div className='col-md-4'>                        
                      <input
                        className='form-control'
                        onChange={handleChange}
                        id={i}
                        name='title_item'
                        value={'' || item.title_item}
                        type="text"
                        required
                        onKeyDown={(e) => { e.key === 'Enter' && 
              e.preventDefault(); }}    
                      />                    
                    </div>
                    <div className="col-md-1">
                      <label htmlFor="link_title" className="form- 
             label text-center mt-1" >
                        <h5> Valor: </h5>
                      </label>
                    </div> 
                    <div className='col-md-4'>
                      <input
                        className='form-control'
                        onChange={handleChange}
                        id={i}
                        name='value'
                        value={'' || item.value}
                        type="text"
                        required
                        onKeyDown={(e) => { e.key === 'Enter' && 
              e.preventDefault(); }}    
                      />   
                      
                    </div> 
                  </div>
                </div>
                  <div className='col-md-1 '>
                    <label htmlFor="link_title" className="form-label 
               mt-1" >
                      <h5> Sinonimos: </h5>
                    </label>
                  </div>
                
                      <ul className='col-md-5 ms-auto '>
                      {sinoms.map((sinom, i) => (
                         item.sinonimos.includes(sinom)  ?
                        <>                            
                          <li key={i}>
                            <div>
                              {sinom}{''}                                 
                              <i className="bi bi-x-circle ms-3" 
                       style={{color: 'red'}} type='button'  
                                onClick={() => {                                    
                                  deleteSinom(sinom);
                                }}>
                              </i>                                 
                            </div>
                          </li> 
                        </>                             
                      : null
                      ))
                      } 
                      <input className="col-md-3 me-2 mt-3"                                
                            key={item.idResponse}
                            value={nuevosin}
                            //name={nuevosin} //works but not clean when click button
                            id={item.idResponse}
                            onChange={e => 
             (setNuevosin(e.target.value.trimRight(), 
               e.target.name))}
                            onKeyDown={(e) => { e.key === 'Enter' && 
                   e.preventDefault(); }}    
                          />
                          <button className="btn btn-outline-primary 
                        col-md-4 " type='button' onClick={() => ( 
                     handleClick(item.idResponse))}>
                            Inserta un Nuevo Sinonimo
                          </button>
                  </ul>
              </>
            ))}
     

這是您在編輯屏幕中的圖像。

如果我在嘗試在字段中輸入數據時使用 value={nuevosin}，則所有字段都顯示相同的值。 如果我使用 name={nuevosin}，可以工作，但是當我單擊按鈕插入值時，該字段未被清除。

我想，當我填寫一個字段時，只需填寫那個字段，當我單擊按鈕添加 sinom 時，清除該字段。

我不知道如何解決這個問題。

有些可以幫助我理清思路嗎？ 謝謝

Answer 1

您正在使用一個 state 來管理您的所有輸入。 請確保在編寫代碼之前了解 react 和 state 管理基礎知識。 盡管您的請求非常不尋常，並且事先不知道您有多少輸入不是最好的主意，但我已經設法使您的代碼正常工作。

 const { useState } = React; const App = () => { const itemsList = [{ idResponse: 1 }, { idResponse: 2 }, { idResponse: 3 }]; const [nuevosin, setNuevosin] = useState({}); console.log(nuevosin); return ( < React.Fragment > { itemsList.map((item, i) => ( < React.Fragment key = { item.idResponse } > < input className = "col-md-3 me-2 mt-3" value = { nuevosin[[item.idResponse]] } id = { item.idResponse } onChange = { e => setNuevosin(prevValue => ({...prevValue, [item.idResponse]: e.target.value })) } onKeyDown = { (e) => { e.key === 'Enter' && e.preventDefault(); } } /> < button className = "btn btn-outline-primary col-md-4 " type = 'button' onClick = { () => (handleClick(item.idResponse)) } > Inserta un Nuevo Sinonimo < /button></React.Fragment > )) } < /React.Fragment> ); } ReactDOM.createRoot( document.getElementById("root") ).render( < App / > );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

我所做的一些更改包括添加反應片段，因為反應組件必須只有一個父組件。 還將 key 道具添加到現在是 Fragment 的父組件。