傳遞事件和對象在作用

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;