Входное значение - onChange vs Manual

Question

Я пытаюсь передать массив строк через контекстный API от дочернего элемента к родителю.

Я делал это с помощью ввода who pu sh значения, записанного в нем, для другого ввода который отображает все значения, выдвинутые первым.

(просто, чтобы показать пользователю его значения).

проблема в том, что метод onChange не запускается при нажатии значения на этот вход, и срабатывает только тогда, когда я вручную пишу на этом входе.

Функция midWay должна срабатывать при изменении значения, если оно является пропуском "value".

midWay = (e: any) => {
    const {
        target: {
            name,
            value
        },
    } = e;
    const {
        takeValue
    } = this.props;
    if (takeValue) {
        takeValue(name, value);
    }
};

handleChange = (e: any) => {
    const {
        list,
        tempVal,
        value
    } = this.state;
    let {
        listValue,
        read
    } = this.props;
    this.setState({
        list: list.concat([`${tempVal}`]),
    });
    listValue = list;
    if (tempVal.length > 0) {
        this.setState({
            length: true
        });
    }
    if (list.length > 4) {
        read = true;
    }
    this.setState({
        value: '',
    });
    e.preventDefault();
};

getTags = (e: any) => {
    const {
        list,
        tempVal
    } = this.state;
    let {
        listValue
    } = this.props;
    const {
        target: {
            name,
            value
        },
    } = e;
    const {
        changeValue
    } = this.props;
    listValue = list;
    if (changeValue) {
        changeValue(name, value);
    }
    this.setState({
        tempVal: value
    });
};

render() {
    const {
        value,
        list,
        length,
        tags
    } = this.state;
    const {
        Header,
        inputName,
        type,
        read
    } = this.props;
    let {
        listValue
    } = this.props;
    listValue = list;
    return ( <
        TagsContextConsumer > {
            ({
                tags,
                changeValue,
                takeValue
            }) => ( <
                Row >
                <
                W20 >
                <
                form className = "container"
                noValidate autoComplete = "on" >
                <
                TextField id = "standard-name"
                name = "tags"
                label = "Your Tags"
                className = "textFields"
                value = {
                    listValue
                }
                margin = "normal"
                InputProps = {
                    {
                        readOnly: read,
                    }
                }
                type = "text"
                onChange = {
                    this.midWay
                }
                /> <
                hr / >
                <
                TextField id = "standard-name"
                name = {
                    inputName
                }
                label = {
                    Header
                }
                className = "textFields"
                value = {
                    value
                }
                margin = "normal"
                InputProps = {
                    {
                        readOnly: read,
                    }
                }
                type = {
                    type
                }
                onChange = {
                    this.getTags
                }
                />

                <
                RegularButton onClick = {
                    this.handleChange
                } > Add < /RegularButton> <
                /form> <
                /W20> <
                /Row>
            )
        } <
        /TagsContextConsumer>
    );
}