Javascript 如何使用-react js编写编辑函数

这里是我的页面，当我点击按钮，然后它是显示细节（见下图）

这是编辑页面：

我的问题是当我尝试编辑详细信息时（请参见编辑详细信息图像）。它应该采用下图中的值（id）。但是当我单击编辑按钮时，这些输入字段不会显示现有的详细信息。我如何才能做到这一点。请帮助我解决此错误？

这是我的编辑详细信息表单编码，我使用了后端环回，数据库mysql：

 <Form onSubmit={this.handleSubmit} layout="inline">

            <FormItem {...formItemLayout} label="Title" >
                {getFieldDecorator('Title', {
                  rules: [{ required: true, message: 'Please provide Title!' },{ max: 15, message: 'Title should maximum 15 characters ' },
                /* { pattern: '(^[A-Z][a-z]*$)', message: ' Please Start with Uppercase' }*/],
                })(
             <Select  prefix={<Icon type="book" style={{ fontSize: 13 }} />} 
              showSearch
              style={{ width: 65 }}
              placeholder="Mr."
              optionFilterProp="children"
              onChange={this.handleChange}
              onFocus={this.handleFocus}
              onBlur={this.handleBlur}
              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >

            <Option value="Mr.">Mr.</Option>
              <Option value="Ms.">Ms.</Option>
              <Option value="Miss.">Miss.</Option>

            </Select>


                )}
              </FormItem>

              <FormItem {...formItemLayout} label="Name" >
                {getFieldDecorator('Name', {
                  rules: [{ required: true, message: 'Please provide name!' },{ max: 15, message: 'Name should maximum 15 characters ' },
                  /* { pattern: '(^[A-Z][a-z]*$)', message: ' Please Start with Uppercase' }*/],
                })(
                  <Input  prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Name" />
                )}
              </FormItem>


              <FormItem
              {...formItemLayout}
              label="Relation :"
            >
             {getFieldDecorator('Relation', {
                rules: [{ required: true, message: 'Please provide relation!' }, { max: 200, message: 'Note should be within a 200 characters' }],
              })(

           <Select  prefix={<Icon type="book" style={{ fontSize: 13 }} />} 

              showSearch
              style={{ width: 150 }}
              placeholder="Select a Relation"
              optionFilterProp="children"
              onChange={this.handleChange}
              onFocus={this.handleFocus}
              onBlur={this.handleBlur}
              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >


            <Option value="Father ">Father</Option>
              <Option value="Mother ">Mother</Option>
              <Option value="Husband ">Husband</Option>
              <Option value="Wife ">Wife</Option>
              <Option value="Brother">Brother</Option>
              <Option value="Sister">Sister</Option>
              <Option  value=" Other">  <Input placeholder="Other"  style={{ marginLeft:-7,width: 140,height:32 }} type="text"/> </Option>

            </Select>
            )}


            </FormItem>

            <FormItem
              {...formItemLayout}
              label="Contact No :"
            >
              {getFieldDecorator('Telephone_no', {
                rules: [{
                  required: true, message: 'Please input contact number!',
                }, { max: 10, message: 'You can only add 10 numbers' }, { pattern: '^[0-9]\\d{0,9}?%?$', message: 'Should be a number' },{ min: 10, message: 'You can not add less than 10 numbers' } ],
              })(
                <Input prefix={<Icon type="phone" style={{ fontSize: 13 }} />} placeholder="Contact No" style={{ width: 150 }} />

              )}
            </FormItem>

               <FormItem label="Address:" {...formItemLayout}>
              {getFieldDecorator('Address', {
                rules: [{ required: true, message: 'Please provide address!' }, { max: 100, message: 'Note should be within a 100 characters' }],
              })(
                <TextArea  prefix={<Icon type="book" style={{ fontSize: 13 }} />} placeholder="Address ...?" style={{ width: 350 ,height:75 ,marginTop: 20 ,marginLeft: 33} } />
              )}
            </FormItem>

            <FormItem >
              <Row>
                <Button type="primary"   icon="check-circle-o" htmlType="submit"  style={{ marginLeft: 85,marginTop: 40 }}/>
                <Button htmlType="reset" icon="close-circle" style={{ marginLeft:8 ,marginTop: 40}} onClick={this.resetFields} />
                <Button htmlType="reset" onClick={this.cancelEdit} icon="close-circle" style={{ marginLeft: 8 }}>Cancel</Button>

              </Row>
            </FormItem>
        </Form>

{getFieldDecorator（'Title'{
规则：[{required:true，消息：“请提供标题！”}，{max:15，消息：“标题最多应包含15个字符”}，
/*{pattern:“（^[A-Z][A-Z]*$”，消息：“请以大写字母开头”}*/]，
})(
option.props.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0}
>
先生
太太
错过。
)}
{getFieldDecorator（'Name'{
规则：[{required:true，消息：“请提供名称！”}，{max:15，消息：“名称最多应包含15个字符”}，
/*{pattern:“（^[A-Z][A-Z]*$”，消息：“请以大写字母开头”}*/]，
})(
)}
{getFieldDecorator（'关系'{
规则：[{required:true，消息：'请提供关系！'}，{max:200，消息：'注释应在200个字符之内'}，
})(
option.props.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0}
>
父亲
母亲
丈夫
妻子
兄弟
姐妹
)}
{getFieldDecorator（'电话号码'{
规则：[{
必填项：true，消息：“请输入联系人号码！”，
}，{max:10，消息：'只能添加10个数字'}，{pattern:'^[0-9]\\d{0,9}？%？$，消息：'应该是一个数字'}，{min:10，消息：'不能添加少于10个数字'}，
})(
)}
{getFieldDecorator（'地址'{
规则：[{required:true，消息：'请提供地址！'}，{max:100，消息：'注释应在100个字符以内'}，
})(
)}
取消

您问题的标题与内容不匹配。似乎您的问题在于表单是否反映了数据库中当前存在的值。如果是这种情况，您应该通过

props

传递这些值，并在字段上设置

值
prop。@NorianNyx我更改了它，先生。您能请求吗是否更正我的代码？看起来您正在使用表单库。类似于
redux表单
？如果是
redux表单
，请查看。