javascript - 为什么我的输入框在用户输入方面表现异常？

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 更新本地组件状态，但使用 this.props.articleIdValue 作为值。

要么使用本地状态的值，要么提升状态并将处理程序传递给父级。

我看到您正在使用 redux，因此您需要将值存储在 redux 存储中并为其创建相关的操作和缩减程序。