如何在反应中为特定元素触发 onChange 事件

Question

Hi guys am new to react and after reading the doc. i jump straigth to developmentwith react, I have a set of elements with the fire the same onChange event now the problem i have is all the element are control rather than the targeted one

 function handleOnChange(e){
    let value = e.target.value
    if(isNaN(value)){
      value = 0
    }
    else if(value === "" || value <= 0){
      value = 0
    }
    setInfo(preInfo => {
      return{
        ...preInfo,
        quantity:value,
        
      }
    })
  }



 <div className="input-group buynum_select">
       <span className="input-group-btn">
       <button className="btn minus" 
         onClick={e => handlerUpdateQuantity(-1)}>-</button>
                            </span>
           <input maxLength="7" className="form-control" value={info.quantity} 
            onChange={e => handleOnChangeQuantity(e)}
            onKeyUp={e => handleKeyUpQuantity(e)} type="text"  
                   />
            <span className="input-group-btn">
             <button className="btn plus"
            onClick={e => handlerUpdateQuantity(1)}>+</button>
             </span>
        </div>

 <div className="input-group buynum_select">
       <span className="input-group-btn">
       <button className="btn minus" 
         onClick={e => handlerUpdateQuantity(-1)}>-</button>
                            </span>
           <input maxLength="7" className="form-control" value={info.quantity} 
            onChange={e => handleOnChangeQuantity(e)}
            onKeyUp={e => handleKeyUpQuantity(e)} type="text"  
                   />
            <span className="input-group-btn">
             <button className="btn plus"
            onClick={e => handlerUpdateQuantity(1)}>+</button>
             </span>
        </div>

I have multiple instance of the input field but when i try to change the value of input field one other input are updated as well . how can i target a specific input amoung others

though i control only input 1 but input 2 also got value

Answer 1

Your two input fields has the same value with {info.quantity}. You should change the value and the name to identify input control.

for example;

<input maxLength="7" className="form-control" name="quantity1" value={info.quantity1} 
            onChange={e => handleOnChangeQuantity(e)} />
<input maxLength="7" className="form-control" name="quantity2" value={info.quantity2} 
            onChange={e => handleOnChangeQuantity(e)} />
function handleOnChange(e){
    var name = e.target.name;
    var value = e.target.value;

    ...
    setInfo(preInfo => {
      return{
        ...preInfo,
        [name]:value,
        
      }
    })
  }

Answer 2

Easiest way to resolve this is to create a separate counter component which keeps its state locally:

const Counter = props => {
  const [count, setCount] = useState(0)
  return (
    <div className="counter">
      <button onClick={e => setCount(count - 1)}> - </button>
      <input value={count} onChange={e => setCount(parseInt(e.target.value))} />
      <button onClick={e => setCount(count + 1)}> + </button>
    </div>
  )
}

This way, each component keeps different count.

I don't exactly know your use case but it might make more sense to utilize the same state as an object and keep each value under a specific property name of the object or keep an array as state and the Nth element in the array corresponds to the Nth count - [3, 5, 1, 2, 0, 5] means the first counter has the value 3, the second counter has value 5, the third has value 1 and so on... It all depends on the use case. If I was dynamically rendering each counter, I'd go with an array of values as it is most efficient in terms of memory and performance and a clean solution. If I have a fixed number of elements I'd probably go with a combination of object state and separate count component with setState passed down.