形式不更改事件的输入值

Question

我似乎无法弄清楚。

我有一个经过formik验证的表格。

当我单击搜索按钮时，我会进行api调用以获取地址列表。

当我单击其中一个地址时，我想用来自单击地址的数据填充输入。

除了最后一部分，我可以完成上述所有操作。我尝试使用document.getElementById.innerHTML，将其设置为状态并由该状态对象控制输入，但是我似乎无法使其填充任何数据。

import React, { Component } from 'react';
import { Formik, Form, Field } from 'formik';
import Axios from 'axios';

class CharityAgreement extends Component {

    constructor(props) {
        super(props);
        this.state = {
            response: [],
            visible: true,
            address: ''
        }
    }

    postcodeChange = (e) => {
        console.log(e.target.value);
        this.setState({ 'postcode': e.target.value })
    }

    searchPostcode = () => {

        this.setState({ 'visible': true });

        if (this.state.postcode.length > 0) {
            Axios.get('post code api lookup here')
                .then(response => {
                    this.setState({ 'response': response.data });
                    console.log('response data:', response.data);
                })
        } else {

        }
    }

    addressClick = (e) => {
        console.log('CLICKED ADDRESS:', e.target.innerHTML);
        this.setState({ 'visible': false });
    }

    render() {

        const result = this.state.response.map((item) => {

            if (this.state.visible === true) {

                return (
                    <p key={item.Id} onClick={this.addressClick} className='lookup-data'>{item.address1Field} {item.address2Field} {item.townField} {item.countyField}</p>
                )
            } else {

            }
        })

        return (
            <div className='body-wrapper'>
                <main id='mainContent' className='container'>
                    <div className='page-content-wrapper'>
                        <div className='raised-bordered-wrapper'>
                            <div className='raised-bordered quiz form'>

                                <Formik
                                    initialValues={{
                                        address_1:'',
                                    }}
                                    validate={(values) => {
                                        const errors = {};
                                        if (!values.address_1) errors.address_1 = 'Required';
                                        return errors;
                                    }}
                                    onSubmit={this.handleSubmit}

                                    render={({
                                        touched,
                                        errors,
                                        values,
                                        handleChange,
                                        handleBlur,
                                        handleSubmit
                                    }) => (
                                            <Form>
                                                <div className='form-row'>
                                                    <span className='form-cell-wrapper'>
                                                        <label>Postcode Lookup</label>
                                                        <Field
                                                            name='postcode-lookup'
                                                            type='text'
                                                            onChange={this.postcodeChange}
                                                        />
                                                        <button className='btn' onClick={this.searchPostcode}>Search</button>
                                                    </span>
                                                </div>

                                                {result}

                                                <div className='form-row'>
                                                    <h5>License Code and Area</h5>
                                                    <span className='form-cell-wrapper'>
                                                        <label>Address Line 1</label>
                                                        <Field
                                                            name='address_1'
                                                            value={values.address_1}
                                                            onChange={handleChange}
                                                            id='address'
                                                            type='text'
                                                            style={{
                                                                borderColor:
                                                                    errors.address_1 && touched.address_1 && "tomato"
                                                            }}
                                                        />
                                                    </span>
                                                </div>
                                            </Form>
                                        )}
                                />
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        )
    }
}

export default CharityAgreement;