账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    setFieldsValue设置自己值使输入框受控。
    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);

    这是第一个输入框实时输入,我不能对表单进行控制。

    1
    打赏
    收藏
    点击回答
        全部回答
    • 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组件控制。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部