Почему мое поле ввода ведет себя странным образом с точки зрения пользовательского ввода?

Question

Я не понимаю, почему я ничего не могу набрать в <input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/>.Если я что-то наберу и нажму submit, только тогда буква появится в поле ввода.Тип поведения, которого я никогда раньше не видел.

Что я делаю не так и как я могу это исправить?

Вот SearchArticle:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionType from '../../store/actions/actions';

class SearchArticle extends Component {
    constructor(props) {
        super(props);

        this.state = {
            flag: false,
            idVal: '',
            cityCodeval: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleArticleId = this.handleArticleId.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log("IDValue --> " + this.state.idVal);
        this.props.articleIdValueRedux(this.state.idVal);
    }

    handleChange = event => {
        this.setState({value: event.target.value});
        this.props.CityCodeReducerRedux(event.target.value);
    }

    handleArticleId = event => {
        event.preventDefault();
        this.setState({idVal: event.target.value});
    }

    displayName = () => {
           console.log("this.props.articleIdValue = " + this.props.articleIdValue);
           return(
               <div>
                   <p>author name: {this.props.authorNameValue}</p>
                   <p>article text: {this.props.storyTextValue}</p>
               </div>
           );
       }


    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
                    <input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/>
                    <button type="submit" value="Search">Submit</button>
                    {this.state.flag ? this.displayName() : null}
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        cityCodeValue: state.cityCodeValue.cityCodeValue,
        authorNameValue: state.authorNameValue.authorNameValue,
        articleIdValue: state.articleIdValue.articleIdValue,
        storyTextValue: state.storyTextValue.storyTextValue
    };
};

const mapDispatchToProps = dispatch => {
    return {
        CityCodeReducerRedux: (value) => dispatch({type: actionType.CITY_CODE_VALUE, value}),
        articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value})
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(SearchArticle);

ВотArticleIdReducer

import * as actionType from './actions/actions';

const initialState = {
    articleIdValue: ''
};

const ArticleIdReducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.ARTICLE_ID_VALUE:
            return {
                ...state,
                articleIdValue: action.value
            };
        default:
            return state;
    }
};

export default ArticleIdReducer;

Answer 1

handleArticleId = event => {
    event.preventDefault();
    this.setState({idVal: event.target.value});
    // You should probably be calling your this.props.articleIdValueRedux method here
}

При обновлении articleId вы не обновляете свое состояние избыточности, а только состояние внутреннего компонента (и извлекаете значение из состояния хранилища избыточности для отображения на входе, которое не обновляется)

Answer 2

Вы обновляете состояние локального компонента с помощью handleArticleId, но в качестве значения используете this.props.articleIdValue.

Либо используйте значение из локального состояния, либо поднимите состояние и передайте обработчик родительскому объекту.

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