我正在使用 ReactJS 创建 CRUD,但 React Forms 有问题。
在某些情况下,我需要在我的输入中设置一个初始值,为此我使用了一个逻辑运算符,一切正常,但是当我更改输入的值时,输入的值并没有改变.
我的组件:
export function Modal(props) {
const [inputsValues, setInputsValues] = useState({
id: '',
nameInput: '',
emailInput: '',
phoneInput: ''
})
const handleInputChange = (event) => {
console.log(event.target.value)
inputsValues[event.target.name] = event.target.value
setInputsValues()
}
const handleFormSubmit = (event) => {
event.preventDefault()
console.log(inputsValues)
}
return (
<div className={`area-modal ${props.isOpen ? 'open' : null}`}>
<div className="modal">
<h1>{props.title}</h1>
<form onSubmit={handleFormSubmit} action="">
<label htmlFor="">Name</label>
<div className="area-input">
<input
type="text"
name="nameInput"
value={inputsValues.nameInput}
onChange={handleInputChange}
/>
</div>
<label htmlFor="">Phone</label>
<div className="area-input">
<input
type="text"
name="phoneInput"
value={props.dataForm ? props.dataForm.phone : ''}
onChange={handleInputChange}
/>
</div>
<label htmlFor="">Email</label>
<div className="area-input">
<input
type="email"
name="emailInput"
value={props.dataForm ? props.dataForm.email : ''}
onChange={handleInputChange}
/>
</div>
<button>{props.buttonText}</button>
</form>
</div>
</div>
)
}
最佳答案
代替
inputsValues[event.target.name] = event.target.value;
setInputsValues();
您需要使用 setInputsValues
将状态更新为新值:
const { name, value} = e.target;
setInputsValues({ ...inputsValues, [name]: value });
关于javascript - 当我设置初始值时,React Input 不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68448822/