Question

我刚开始尝试实现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 }

我需要为特定面额更新sum。

以下是我的演示文稿组件

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;

有了这个，我就可以得到输入字段的值，但是我怎么能忽略我目前所使用的面额呢？

Answer 1

Mayank的评论是正确的，您可以修改props.onDenomChange函数以接受denom作为第二个参数。但是为了让您的handleKeyUp函数访问组件状态，您需要显式绑定处理程序。所以你的输入JSX应该是这样的：

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

Answer 2

首先，我会建议你完全避开状态，但如果你想保留它，请不要忘记在收到新房产后更新状态。

假设您只想更改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 } 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;

将事件和对象传递给函数进行反应

2 个答案: