0
148
VistasHow to fire onChange event for specific element in react
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
2 Respuestas
Responde la pregunta0
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,
}
})
}
0
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.