Question

目前，我的应用程序仅使用React及其状态，我正在尝试使用Redux来实现它。

我有一个呈现子组件的父组件，该子组件是我保留输入字段的地方。下面是我要传递给它的内容（全部与状态一起使用，只有submitresults与reducer一起使用）。

            <ManualInputs
                //addEntry={this.addEntry}
                submitResults={this.props.submitResults}

                xPartyinputValue={this.props.xPartyinputValue}
                zPartyinputValue={this.props.zPartyinputValue}
                yActioninputValue={this.props.yAction}

                handleChangeAmount = {this.handleChangeAmount}
                handleChangeXParty={this.handleChangeXParty}
                handleChangeZParty={this.handleChangeZParty}
                handleChangeyAction={this.handleChangeyAction}
            />

submitResults={this.props.submitResults}的工作方式是将一个对象发送给reducer，下面将向您介绍它的工作方式：

const mapDispatchToProps = dispatch => {
    return {
        submitResults: () => dispatch({type: 'SUBMIT', x: {
            id: Math.random(),
            xParty: 'Tom',
            yAction: 'Funds',
            zParty: 'Elizbath',
            amount: 50,
            payload: 'xPartyinputValue'
        }
        })
    };
};

上面的函数将数据发送到reducer.js文件，并在那里正确更新初始状态，但是我的问题是这个，

现在在submitResults中，我正在对值进行硬编码，但是我想从<ManualInputs>中的用户输入中获取值。我该怎么做？

----------------------- 更新并完成 ------- -------------------

唯一更改的部分是submitResults={this.props.submitResults}变为：

submitResults={() => this.props.submitResults(this.state.xPartyinputValue, this.state.zPartyinputValue, this.state.yActioninputvalue, this.state.amountinputvalue)}

这没有传递我们需要的值。

与mapDispatchToProps部分不同，只是传入了args并将其称为。 submitResults: (xParty, zParty, yAction, amount) => dispatch({type: 'SUBMIT', x: { id: Math.random(), xParty: xParty, yAction: zParty, zParty: yAction, amount: amount } })

Answer 1

有两种方法。

您可以使用redux-form来跟踪输入并更新状态。
您可以设置输入以触发操作并在redux状态内更新适当的字段。然后，当您要提交时，您只需触发一个新操作即可使用getState（不返回组件）获取当前状态，然后提交数据，并成功清除输入字段。
您可以在类组件中设置输入字段所在的本地状态。然后，您可以在mapDispatchToProps中将数据发送到您已创建的操作中。

您可以看一下本指南进行一些练习：https://medium.com/@pnpsegonne/tutorial-creating-a-form-with-react-redux-c1b3025cf26b

它使用了几个旧的react生命周期函数，但它将为您提供有关东西如何工作的良好基础。

在这里您可以阅读有关redux-form的更多信息，应该采用这种方式：https://medium.com/dailyjs/why-build-your-forms-with-redux-form-bcacbedc9e8

Answer 2

您可以将参数传递给SubmitResults方法...

考虑以下代码：

const mapDispatchToProps = dispatch => {
return {
    submitResults: (args) => dispatch({type: 'SUBMIT', x: {
        id: Math.random(),
        xParty: args.xparty,
        yAction: args.yaction,
        zParty: args.zparty,
        amount: args.amount,
        payload: args.xpartyinputvalue
    }
    })
  };
};

React / Redux将输入值传递给reducer.js

2 个答案: