[英]Set state in React Js
我有一个包含 3 个输入的应用程序:名称、百分比和密码。 另外,我有一个保存按钮,它应该使用父组件中输入的值来更改状态。
使用 Ant Desing,我想设置百分比,但我无法从 AntD 的 Input Number 中获取[e.target.name]
。
如何解决这个问题,以及当我单击保存按钮以更新父组件中的状态时?。
一些注意点:
onInputNumber()
defaultValue
value={state.percentage}
道具。save()
添加percentage
在线试用: https : //stackblitz.com/edit/react-5qrwcq
const Test = ({ user, setUser }) => {
const [state, setState] = useState({ name: "", password: "", percentage: "1" });
function onChange(e) {
setState({
...state,
[e.target.name]: e.target.value
});
console.log(state)
}
function onInputNumber(value) {
setState({...state, percentage: value})
console.log('changed', value);
}
function save() {
setUser({ ...user, name: state.name, password: state.password, percentage: state.percentage });
}
return (
<div>
<input name='name' onChange={onChange} />
<input name='password' onChange={onChange} />
<InputNumber
// defaultValue={100}
min={0}
max={100}
value={state.percentage}
formatter={value => `${value}%`}
parser={value => value.replace('%', '')}
onChange={onInputNumber}
/>
<button onClick={save}>save</button>
</div>
);
};
您可以从 Antd 输入的 onchange 传递名称。
<InputNumber
defaultValue={100}
min={0}
max={100}
formatter={value => `${value}%`}
parser={value => value.replace('%', '')}
onChange={(value) => onInputNumber('myinput', value)}
/>
function onInputNumber(name, value) {
console.log('changed', value, name);
}
在您的保存功能中,您似乎没有将更新编码为百分比:
function save() {
setUser({ ...user, name: state.name, password: state.password });
}
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.