クリックイベントが、同じタイプのすべてのReactコンポーネントを正しく変更しない

Question

複数回レンダリングされるコンポーネントに対してonClickイベントが設定されています。このonClickがトリガされると、JS変数によって決定されるボタン内のテキストが変更されます。しかし、あるコンポーネントのボタンをクリックすると、この同じタイプの他のすべてのコンポーネントのテキストが変更されます。ここでは、コードは次のとおりです。

FormEntity.js：

import React from 'react'; 

let hasFile = false; 
let uploadBtnText = 'Simulate file upload'; 
const FormEntity = (props) => { 
    const handleClick =() => { 
     if(hasFile) { 
     props.formInstanceRemoved(props.instanceId); 
     hasFile = false; 
     uploadBtnText = 'Simulate file upload'; 
     } else { 
     props.formInstanceUploaded(props.instanceId, props.blueprintId); 
     hasFile = true; 
     uploadBtnText = 'Remove file'; 
     } 
    }; 

    return (
    <div> 
     <button type="button" onClick={handleClick}> {uploadBtnText} </button> 
    </div> 
); 
}; 

export default FormEntity; 

ここでさらなる問題を示して助けるべき画像です。

ボタンをクリックするだけで、あまりにもテキストや他のどんなそのボタン内にある、ない他のすべてのコンポーネントに影響を与える必要があります。何かアドバイス？

Answer 1

各ボタンには独自の状態が必要なので、ボタンをステートフルなものとして定義し、setStateを使用する必要があります。現在の実装では、ボタンのすべてのインスタンスで共有されるモジュールレベルの変数が変更されます。

const FormEntity extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     hasFile: false, 
     uploadBtnText: 'Simulate file upload', 
    }; 
    } 

    handleClick =() => { 
    if (this.state.hasFile) { 
     this.props.formInstanceRemoved(props.instanceId); 
     this.setState({ 
     hasFile: false, 
     uploadBtnText: 'Simulate file upload', 
     }); 
    } else { 
     this.props.formInstanceUploaded(props.instanceId, props.blueprintId); 
     this.setState({ 
     hasFile: true, 
     uploadBtnText: 'Remove file', 
     }); 
    } 
    }; 

    render() { 
    return (
     <div> 
     <button type="button" onClick={this.handleClick}> {uploadBtnText} </button> 
     </div> 
    ); 
    } 
}; 

Answer 2

おそらくFormEntityをimport/requireに含めます。したがって、インポートされたコンポーネントのすべてのインスタンスFormEntityは同じuploadBtnText変数を共有します。 特定のインスタンスで変更された場合は、FormEntityが共有されるため、他のすべてのインスタンスFormEntityも更新されます。

ステートレスファンクションFormEntityを標準コンポーネントにリファクタリングし、uploadBtnTextをその状態で書くことをお勧めします。