Question

在通过CreateArticle组件创建完文章（可以正常工作）之后，我只想显示用户在value中写的内容（<textarea value={value}>）。通过SearchArticle函数的displayName()组件。

换句话说，在CreateArticle组件中，当用户在<textarea/>中键入内容，然后单击Submit（保存用户写的按钮）时，我只想在Search Article函数中显示用户在displayName()中写的内容。

我在做什么错，我该如何解决？

这里是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 => {
        this.setState({storyTextValue: event.target.value});
        this.props.storyTextValueRedux(event.target.storyTextValue);
        event.preventDefault();
    }

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

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

    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';

import ArticleText from '../../containers/ArticleText/ArticleText';

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: {<ArticleText/>}</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.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
    };
};

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

您正在查看<ArticleText>的2个不同实例。在CreateArticle中更改实例的属性不会在SearchArticle

中更改实例

您应该通过redux存储中的内容来共享值，而不是尝试使用相同的类来共享值。

您应该定义一个诸如{type: updateArticleText, articleText: foo}之类的调度事件和事件，然后在化简器中，可以将redux状态设置为具有与event.articleText相等的属性ArticleText。

现在，您的值存储在redux存储中，而不是组件状态中，您的组件只需通过mapStateToProps函数从redux存储中获取道具。

如何仅显示用户从组件写到另一个的文本？

1 个答案: