reactjs - 将文本值传递给另一个组件

Question

如何在 React 中使用 Redux 将文本值传递给另一个组件？

我正在 React 中学习 Redux。我正在尝试使用 React 中的 Redux 将文本值传递给另一个组件。

我的代码如下

我的组件.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Mycomponent extends Component {
    state = {
        textInput: '',
    }

    handleChange = event => {
        this.props.dispatch({ type: "add" });
    }

    render = () => {        
        return (
            <div>
                <input
                    type="text"
                    onChange={this.handleChange} />
            </div>
        );
    }
}

const mapStateToProps = state => ({ nameState: state.nameState});

export default connect(mapStateToProps)(Mycomponent);

nameAction.js

export const nameAction = () => ({
    type: 'add'
});

export default { nameAction };

nameReducer.js

const nameReducer = (state = {}, action) => {
    switch (action.type) {
        case 'add': {
            return {
                ...state,
                nameState: action.payload
            };
        }
        default:
            return state;
    }
};

export default nameReducer;

输出组件.js

import React, { Component } from 'react';

class Outputcomponent extends Component {
    render = (props) => {
        return (
            <div>
                <div>{this.props.nameState }</div>
            </div>
        );
    }
}

export default Outputcomponent;

标签： reactjsreact-redux

Answer 1

Josiah 解释的使用 redux 钩子对我来说是最好的方法，但您也可以使用 mapDispatchToProps。

即使主要问题是您没有在“添加”操作中传递任何数据。

nameAction.js

您在nameReducer.js中调用 action.payload但它没有出现在您的操作中

export const nameAction = (text) => ({
  type: 'add',
  payload: text
});

我的组件.js

那么对于你的状态，我们可以 mapDispatchToProps。

（我认为最好使用提交按钮触发操作并将输入更改保存在您的 textInput 状态，但我想这是故意没有的）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {nameAction} from './nameAction'

class Mycomponent extends Component {
    state = {
        textInput: '',
    }

    handleChange = event => {
        this.props.nameAction(event.target.value);
    }

    render = () => {        
        return (
            <div>
                <input
                    type="text"
                    onChange={this.handleChange} />
            </div>
        );
    }
}

const mapStateToProps = state => ({ nameState: state.nameState});

const mapDispatchToProps = dispatch => ({ nameAction: (text) => dispatch(nameAction(text))});

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

输出组件.js

使用 connect 和 mapStateToProps 的类或使用带有功能组件的 useSelector 挂钩来获取数据的两种可能性。

有一个班级

import React, { Component } from "react";
import { connect } from "react-redux";

class OutputComponent extends Component {
    render = () => {
        return (
            <div>
                <div>{this.props.nameState}</div>
            </div>
        );
    };
}

const mapStateToProps = state => state;

export default connect(mapStateToProps)(OutputComponent);

带有功能组件

import React from "react";
import { useSelector } from "react-redux";

const OutputComponent = () => {
    const nameState = useSelector((state) => state.nameState);
    return (
        <div>
            <div>{nameState}</div>
        </div>
    );
};

export default OutputComponent;

当然你不能忘记创建一个 strore 并将它提供给最高的组件

store.js

import { createStore } from "redux";
import nameReducer from "./nameReducer";

const store = createStore(nameReducer);

export default store;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
    document.getElementById("root")
);