Reduxのフォーム - 入力フィールド

Question

の末尾にジャンプカーソルは、私はの真ん中にカーソルを置くたび、私はこの

<Field component={TestInput} name="testProp" /> 

のように使用している以下のクラス

export default class TestInput extends Component { 

    state = { 
     modified: false 
    }; 

    change = e => { 
     this.setState({ modified: true }); 
     this.props.input.onChange(e.target.value); 
    }; 

    render() { 
     return (
      <input type="text" value={this.props.input.value} onChange={this.change} className={!this.state.modified && this.props.meta.pristine ? 'default' : 'modified'} /> 
     ); 
    } 
} 

を持っていますフィールド内のテキストと文字を書くと、文字は正しい場所に表示されますが、カーソルはフィールドの最後にジャンプします。これは、this.setState({ modified: true });行以降のクラス変更によって発生します。この行をコメントアウトすると、これは起こっていません。私はそれを理解していない。私は間違って何をしていますか？それについて何かできますか？

Answer 1

これは、すなわち、onChangeイベントにあなたはthis.setStateが再度レンダリングするコンポーネントを強制することを知っているかもしれないとして、あなたはthis.setState({ modified: true })を持っているあなたがchange()機能がトリガーされます入力の値を変更しようとするたびに、たまたま今度は!this.state.modifiedがfalseを返すので、クラスはmodifiedに変更されます。つまり、最後までジャンプしているカーソルは、modifiedクラスを実行する何かを持っている可能性があります。

あなたの質問を見たり言い直したりする必要があるかもしれませんが、どうしたらいいですか？