コンポーネントの外部でコンポーネントの状態を変更するにはどうすればよいですか？

Question

以下の行では、コード内のonChange（だけでなく）の扱いを管理するための、よりクリーンで抽象的なアプローチをどのように作成することができたかを説明します。

後、私は、このパターンに出くわした：

class A extends React.Component { 
    constructor(props) {...} 

    handleText1Change = (e) => 
    this.setState(prevState => ({ 
     text1: e.target.value 
    })) 

    handleText2Change = (e) => 
    this.setState(prevState => ({ 
     text2: e.target.value 
    })) 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      onChange={this.handleText1Change} 
     /> 
     <input 
      type="text" 
      onChange={this.handleText2Change} 
     /> 
     </div> 
    ) 
    } 
} 

それはコンポーネントの各入力ごとの処理関数を記述するためにはかなり迷惑なんだし、それが大体（自分を繰り返さない）DRY原則に違反します。だから、私はそれをリファクタリングし、次のようになった：

class A extends React.Component { 
    constructor(props) {...} 

    handleInputChange = (value, property) => 
    this.setState(prevState => ({ 
     [property]: value 
    })) 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      onChange={e => this.handleInputChange(e.target.value, 'text1')} 
     /> 
     <input 
      type="text" 
      onChange={e => this.handleInputChange(e.target.value, 'text2')} 
     /> 
     </div> 
    ) 
    } 
} 

非常にクリーナーで再利用可能。しかし、他のいくつかのコンポーネントで同じ機能が必要な場合はどうすればよいですか？

Answer 1

同様の方法ですが、thisを引数として渡すことを避けるために、ユーティリティ関数をコンストラクタのコンポーネントインスタンスにバインドすることもできます。 handleInputChangeのクロージャを使用して、その使用法をもう少し簡潔にすることもできます。

function handleInputChange (property) { 
    return (e) => { 
    this.setState({ [property]: e.target.value }) 
    } 
} 

class A extends Component { 
    constructor (props) { 
    super(props) 

    this.handleInputChange = handleInputChange.bind(this) 
    } 

    render() { 
    return (
     <div> 
     <input type="text" onChange={this.handleInputChange('text1')} /> 
     </div> 
    ) 
    } 
} 

Answer 2

私はこのに参照を渡すことでこれを行うために管理：

const handleInputChange = (value, property, _this) => 
    _this.setState(prevState => ({ 
    [property]: value 
    })) 

class A extends React.Component { 
    constructor(props) {...} 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      onChange={e => handleInputChange(e.target.value, 'text1', this)} 
     /> 
     </div> 
    ) 
    } 
} 

class B extends React.Component { 
    constructor(props) {...} 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      onChange={e => handleInputChange(e.target.value, 'text2', this)} 
     /> 
     </div> 
    ) 
    } 
} 

は、あなたがこのアプローチをどう思いますか？あなたのコードの中で似たパターンをどうやって扱いますか？