传递事件和对象在作用

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

在第一个地方，我会建议你避免状态可言，但如果你想保持它，不要忘记接收新的属性后更新状态。

假设你想改变只是总结属性：

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;