入力値がReactで更新されないのはなぜですか？

Question

私のコンポーネントには次のコードがあります。特定のものを更新するときに呼び出され、UIの中のものを置き換えます。ユーザーが見た入力値を除いてすべてが更新されています。

let input = { 
    id: 'discount-' + geo + '-' + segment, 
    value: percentage, 
    disabled: applyToAll, 
    placeholder: '0.00' 
}; 

cells.push(
    <td key={'cell-' + geo + '-' + segment} className="discount-segment cfix"> 
    <Text {...input} /> 
    </td> 
); 

これは、物事を持つ<Text>戻ると、

return (
    <div className={containerClasses.join(' ')} id={'field-container-' + id}> 
    {label} 
    <input 
     autoComplete="off" 
     type="text" 
     id={id} 
     ref="input" 
     {...extraProps} 
     name={id} 
     className={classes.join(' ')} 
     defaultValue={this.props.value} 
     onChange={this.props.onChange} 
     /> 
    </div> 
); 

すべてが細かいレンダリング明確にするため取り除かものです。たとえば、percentageの値が5の場合は、フィールドに5と表示されます。私はpercentageを50に更新する何か他のことをします。（コンソールログは、再レンダリング時に正しい番号を表示します）。ただし、値は5しかUIに表示されません。私は入力フィールドにdefaultValueを使用していますが、親から再レンダリングされたものすべてが変更されるはずです。

編集 はvalue代わりのdefaultValueを設定する<Text>を更新しました。しかし、私はstateを使用して、ユーザータイプの値を更新する必要があります。それから私が再レンダリングするとき、私は適切な価値を持って新しい小道具を送りますが、もちろん小道具は更新されません。私のためにキャッチ22。

Answer 1

あなたが手順のカップルを実行する必要があります。

1. あなたの入力はにのみdefaultValue
2. あなたのデフォルトを設定するために、あなたの小道具を使って状態を初期化を使用していない、valueとonChange小道具を使用する必要があります値
3. あなたの小道具が変化したときにあなたの状態を更新し

したがって、たとえば：

const MyComponent = React.createClass({ 

    propTypes: { 
    defaultInputValue: React.PropTypes.string 
    }, 

    getInitialState() { 
    return { 
     inputValue: this.props.defaultInputValue 
    }; 
    }, 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.defaultInputValue !== this.props.inputValue) { 
     //Forcibly overwrite input value to new default if the default ever changes 
     this.setState({inputValue: nextProps.defaultInputValue}); 
    } 
    }, 

    render() { 
    return <input type="text" 
        value={this.state.inputValue} 
        onChange={e => this.setState({inputValue: e.target.value})} />; 
    } 
}); 

一般に、小道具の状態を初期化することは、いいえではありません。コードレビューでこれが出てきたのを見たら、おそらく単純化できるいくつかの振る舞いがあるので、私はおそらくちょっとひどいでしょう。

あなたも行うことができます。入力の値があれば、あなた今までクリア入力から小道具値に戻り

<input value={this.state.inputValue || this.props.defaultInputValue} /> 

このようなことを。この場合、新しい小道具で状態を強制的に上書きする必要はありません。