javascript - 如何在 Redux 的状态中保存用户输入？

Question

我需要触发更新操作 storyTextValue里面StoryTextReducer所以我可以将它用作 this.props.storyTextValue在SearchArticle .

换句话说，在CreateArticle中当用户输入<textarea>时然后点击Submit ，我希望他们输入的任何内容都存储在 storyTextValue 中这将允许我使用 this.props.storyTextValue在SearchArticle显示文本。

我做错了什么以及如何实现这一目标？

这是CreateArticle :

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

class CreateArticle extends Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = event => {
        event.preventDefault();
        this.setState({storyTextValue: event.target.storyTextValue});
        this.props.storyTextValueRedux(event.target.storyTextValue);
    }

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

    onSubmit = () => {
        if(this.props.storyTextValue === "") {
            alert("Please enter the value and then click submit");
        } else {
            alert("Article saved " + '\n' + this.props.storyTextValue);
        }
    }

    render() {

        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
                    <input type="text" placeholder="author name"/>
                    <textarea value={this.props.storyTextValue} onChange={this.handleStoryText} rows="2" cols="25" />
                    <button type="submit" value="Submit" onClick={() => this.onSubmit()}>Submit</button>
                </form>
            </div>
        );
    }
}

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

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

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

这是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
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSubmit(event) {
        this.setState({flag: true});
        event.preventDefault();
    }

    displayName = () => {
        if(this.props.cityCodeValue === "nyc" || this.props.articleIdValue === 1) {
            return(
                <div>
                    <p>author name: {this.props.authorNameValue}</p>
                    <p>article text: {this.props.storyTextValue}</p> {/* want to display story text here */}
                </div>
            );
        }
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
                    <input onChange={this.handleChange} value={this.props.articleIdValue} placeholder="article id"/>
                    <button onClick={() => this.displayName}  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);

这是StoryTextReducer :

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

const initialState = {
    storyTextValue: ''
};

const StoryTextReducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.STORY_VALUE:
            return {
                ...state,
                storyTextValue: action.value
            };
        default:
            return state;
    }
};

export default StoryTextReducer;

Answer 1

在CreateArticle的handleSubmit中，请console.log(event.target.storyTextValue)....我认为它是未定义的。我认为你更喜欢 this.props.storyTextValueRedux(event.target.value);