Reactjs 将事件和对象传递给react中的函数

我是新手，尝试实现

Redux

我尝试在文本输入更新时更新状态。我能够提取

e.target.value

，但它还需要知道更改了什么对象

例如，我的数据可能类似于：

{ name: 'Penny', namePlural: 'Pennies', label: '1¢', value: .01, sum: 0 },
{ name: 'Nickel', namePlural: 'Nickels', label: '5¢', value: .05, sum: 0 },
{ name: 'Dime', namePlural: 'Dimes', label: '10¢', value: .10, sum: 0 },
{ name: 'Quarter', namePlural: 'Quarters', label: '25¢', value: .25, sum: 0 }

我需要更新特定面额的

总和

下面是我的演示组件的内容

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class DenomInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            denom: props.denom
        }
    }

    handleKeyUp = (e) => {
        this.props.onDenomChange(e.target.value);
    }

    render() {
        return (
            <div className="input-group denom">
                <span className="input-group-addon">{this.state.denom.label}</span>
                <input
                    type="text"
                    className="form-control"
                    onChange={this.handleKeyUp}
                    value={this.state.denom.sum} />

                <span className="input-group-addon">{this.state.denom.count | 0}</span>
            </div>
        );
    }
}

DenomInput.PropTypes = {
    denom: PropTypes.object.isRequired
}

export default DenomInput;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
类DenomInput扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
德诺：道具
}
}
handleKeyUp=（e）=>{
this.props.onDenomChange（即target.value）；
}
render（）{
返回(
{this.state.denom.label}
{this.state.denom.count | 0}
);
}
}
DenomInput.PropTypes={
denom:PropTypes.object.isRequired
}
输出默认值；

---

有了这个，我可以得到输入字段的值，但是我如何才能忽略我当前使用的面额呢？

Mayank的评论是正确的，您可以修改您的

道具.onDenomChange

函数以接受

denom

作为第二个参数。但是为了让您的

handleKeyUp

函数访问组件状态，您需要显式绑定处理程序。因此，您的输入JSX应该如下所示：

<input
  type="text"
  className="form-control"
  onChange={this.handleKeyUp.bind(this)}
  value={this.state.denom.sum} />

---

首先，我建议您完全避免使用状态，但如果您想保留状态，请不要忘记在收到新属性后更新状态

假设要更改just sum属性：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class DenomInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            denom: props.denom
        }
    }

    componentWillReceiveProps(nextProps){
        const {denom} = nextProps;
        this.setState({denom});
    }

    handleKeyUp = (e) => {
        const {denom} = Object.assign({}, this.state);
        denom.sum = e.target.value;
        this.props.onDenomChange(denom);
    }

    render() {
        return (
            <div className="input-group denom">
                <span className="input-group-addon">{this.state.denom.label}</span>
                <input
                    type="text"
                    className="form-control"
                    onChange={this.handleKeyUp}
                    value={this.state.denom.sum} />

                <span className="input-group-addon">{this.state.denom.count | 0}</span>
            </div>
        );
    }
}

DenomInput.PropTypes = {
    denom: PropTypes.object.isRequired
}

export default DenomInput;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
类DenomInput扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
德诺：道具
}
}
组件将接收道具（下一步）{
const{denom}=nextProps；
this.setState（{denom}）；
}
handleKeyUp=（e）=>{
const{denom}=Object.assign（{}，this.state）；
denom.sum=e.target.value；
this.props.onDenomChange（denom）；
}
render（）{
返回(
{this.state.denom.label}
{this.state.denom.count | 0}
);
}
}
DenomInput.PropTypes={
denom:PropTypes.object.isRequired
}
输出默认值；

如果要更改多个属性：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class DenomInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            denom: props.denom
        }
    }

    componentWillReceiveProps(nextProps){
        const {denom} = nextProps;
        this.setState({denom});
    }

    handleKeyUp = (e) => {
        const {denom} = Object.assign({}, this.state);
        denom[e.target.name] = e.target.value;
        this.props.onDenomChange(denom);
    }

    render() {
        return (
            <div className="input-group denom">
                <span className="input-group-addon">{this.state.denom.label}</span>
                <input
                    type="text"
                    className="form-control"
                    onChange={this.handleKeyUp}
                    name='sum'
                    value={this.state.denom.sum} />
                <input
                    type="text"
                    className="form-control"
                    onChange={this.handleKeyUp}
                    name='value'
                    value={this.state.denom.value} />

                <span className="input-group-addon">{this.state.denom.count | 0}</span>
            </div>
        );
    }
}

DenomInput.PropTypes = {
    denom: PropTypes.object.isRequired
}

export default DenomInput;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
类DenomInput扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
德诺：道具
}
}
组件将接收道具（下一步）{
const{denom}=nextProps；
this.setState（{denom}）；
}
handleKeyUp=（e）=>{
const{denom}=Object.assign（{}，this.state）；
denom[e.target.name]=e.target.value；
this.props.onDenomChange（denom）；
}
render（）{
返回(
{this.state.denom.label}
{this.state.denom.count | 0}
);
}
}
DenomInput.PropTypes={
denom:PropTypes.object.isRequired
}
输出默认值；

为什么不将另一个值作为第二个参数传递如下：

this.props.onDenomChange（e.target.value、this.state.denom.name）？我已经试过了，但它没有访问
此的权限。状态
您使用的是
箭头功能
它肯定有访问权限，您能告诉我使用
此功能时出现的错误吗。状态
？我需要先向此行添加参数吗
onChange={this.handleKeyUp}
no如果不是必需的，只需在此传递参数：
this.props.onDenomChange（e.target.value，this.state.denom.name）在构造函数中绑定事件以提高性能是否更好？是。否则，每次组件重新渲染时都会调用
bind
方法。但是这两种方法都有效。当我添加
this.handleKeyUp=this.handleKeyUp.bind（this）
在构造函数中，我收到一个错误，说
onDenomChange
不是一个函数。您可以将
onDenomChange
添加到道具验证中，以查看出了什么问题。如果您有时间，我在这里添加了一个后续问题。