React + Form + getFieldDecorator + setFieldsValue

getFieldDecorator

class Form extends Component {
    state = {
        createInput: '',
    }
    handleSubmit = e => {
        e.preventDefault() 
        this.props.form.validateFields({ force: true }, (err, values) => {
            if (!err) {
                this.setState(
                    {
                        createInput: values.ApiName//给input等内容赋值
                    }
                )
            }
        })
    } 
    render() {
        const { theme } = this.props 
        const { getFieldDecorator } = this.props.form
        return (
            <div>
                <h4 className={`createTitle`}>标题</h4>
                <div className={`createBox`}>
                    <Form layout="horizontal" onSubmit={this.handleSubmit}>
                        <Item>
                            {getFieldDecorator('ApiName', {
                                initialValue: this.state.createInput,//设置默认value 
                                rules: [
                                    {
                                        required: true,//是否为必填项
                                        whitespace: true,//是否匹配空格
                                        pattern: new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/),//要匹配等正则
                                        message: "( 2-10个字符，不能包含特殊字符 )",//输入不合法要提示等信息
                                    },
                                ],
                                validateTrigger: 'onBlur',
                            })(
                                <Input
                                    autoComplete="off"
                                    className={`createNameInput`}
                                    placeholder={ "( 2-10个字符，不能包含特殊字符 )"}
                                    maxLength={10}
                                />
                            )}
                        </Item>
                        <Item>
                            <Button type="primary" htmlType="submit"> 创建 </Button>
                        </Item>
                    </Form> 
                </div>
            </div>
        )
    }
}

export default Form.create({})(Form)

#setFieldsValue

class Index extends Component{
	constructor(props) {
        super(props)
        this.state = { }
    }
    // example 为Form.Item中的name
componentDidMount () {
	this.formRef.current.setFieldsValue({
       example: ‘从后台返回要显示的值’,				
	})
}
    // 创建一个ref
    formRef = React.createRef()
    render(){
    	return{
    	     {/* 绑定到Form身上*/}
        	 <Form ref={this.formRef}>
                <Form.Item name="example">
                   <Input />
                </Form.Item>
             </Form>
        }
    }
}


export default BaseInfo