- 49
- 0
antd中form表单的setFieldsValue只能设置其他域的值,不能控制自己表单域的值,另外我希想把redux中传过来的props绑定到form,使props改变表单值实时改变。不能使用value,应该如何处理。
class App extends React.Component {
state={
a:123
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
handleSelectChange = (e) => {
console.log(e.target.value)
this.props.form.setFieldsValue({
note: '123',
gender:'1'
});
}
render() {
const { getFieldDecorator } = this.props.form;
const a=/^\d{1,6}$/
return (
<Form onSubmit={this.handleSubmit}>
<FormItem
label="Note"
labelCol={{ span: 4 }}
wrapperCol={{ span: 8 }}
>
{getFieldDecorator('note', {
rules: [{ required: true, message: 'Please input your note!' },{pattern:a,message:'请输入1-6位'}],
})(
<Input onChange={this.handleSelectChange.bind(this)}/>
)}
</FormItem>
<FormItem
label="Gender"
labelCol={{ span: 4 }}
wrapperCol={{ span: 8 }}
>
{getFieldDecorator('gender', {
rules: [{ required: true, message: 'Please select your gender!' }],
})(
<Select
placeholder="Select a option and change input text above"
onChange={this.handleSelectChange}
>
<Option value="1">male</Option>
<Option value="2">female</Option>
</Select>
)}
</FormItem>
<FormItem
wrapperCol={{ span: 8, offset: 4 }}
>
<Button type="primary" htmlType="submit">
Submit
</Button>
</FormItem>
</Form>
);
}
}
const WrappedApp = Form.create()(App);
这是第一个输入框实时输入,我不能对表单进行控制。
- 共 0 条
- 全部回答
-
゛若爱丶会伤つ@ 普通会员 1楼
在Ant Design等UI库中,
setFieldsValue方法通常用于Form表单中设置或更新表单字段的值,使得输入框等表单组件变为受控组件。在React中,受控组件是指其值由React组件控制,而不是由DOM本身控制。这意味着每次用户输入时,都需要通过onChange事件处理器来更新组件的状态(或props),然后渲染新的值到输入框中。
例如,在Ant Design的Form表单中:
```jsx import { Form, Input } from 'antd';
class MyForm extends React.Component { constructor(props) { super(props); this.formRef = React.createRef(); }
handleButtonClick = () => { // 设置input的值为'controlled value' this.formRef.current.setFieldsValue({ name: 'controlled value' }); }
render() { return (
); } } ```在这个例子中,点击按钮后会调用
setFieldsValue方法将输入框的值设置为'controlled value',此时输入框就变成了受控组件,它的值完全由React组件控制。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

