javascript - 如何使用 -react js 编写编辑功能

Question

这是我单击按钮时的页面，然后显示详细信息（见下图

这是编辑页面：

我的问题是当我尝试编辑详细信息时（请参阅编辑详细信息图像）。它应该采用如下图所示的值（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>

标签： javascriptreactjs