パスワードオブジェクトの配列を提供するストアがあります。例：
const passwords = [{
id: 'hjgkjhkjl',
password: 'jhckjdhf',
createdAt: 'jan 3rd, 2019'
},
{
id: 'uygkjhkj',
password: 'kdjhfkjdhf',
createdAt: 'jan 3rd, 2019'
}
]コンポーネントでthis.props.passwordsとしてこのパスワードにアクセスできます
ボタン付きのリストとしてUIにそれらを入力しようとしています（更新/確認）-コンポーネントレベルの状態を使用してそれらを切り替えています
コンポーネントレベルの状態なので、1つのボタンをクリックすると、すべてのボタンが変更されます
これが私のコードです
class Passwords extends React.Component {
constructor(props) {
super(props)
this.state = {
disabled: false
}
this.handleUpdate = this.handleUpdate.bind(this)
}
handleUpdate(element) {
// this.context.executeAction(removePassword, element.createdAt)
// this.context.executeAction(fetchPasswords)
this.setState({
disabled: !this.state.disabled,
})
}
render() {
const data = [
{
password: "passwordone",
createdAt: "Jan 2, 2019"
},
{
password: "passwordtwo",
createdAt: "Jan 2, 2019"
}
];
return (
<div>
{data.map((element) => {
return (
<div>
<input value={element.password} disabled={!this.state.disabled}/>
<span style={{marginLeft: "15px"}}> {element.createdAt} </span>
<span style={{marginLeft: "15px"}}>
<button onClick={() => this.handleUpdate(element)}>
{this.state.disabled ? "Confirm" : "Update"}
</button>
</span>
</div>
)
})}
</div>
)
}
}
ReactDOM.render(<Passwords/>, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'>
</div>これを解決するには、より良いアプローチが必要です
作業例は次のリンクにあります
idはパスワードアイテムに対して一意です-期待される結果の更新/確認は、クリックされたボタンに対してのみ切り替える必要があります
前もって感謝します
Sellmeadogが言ったように、2つのコンポーネントを含む親コンポーネントを作成する必要があります。各コンポーネントには独自の状態があり、親コンポーネントは各子に小道具を与えます。このように、各ボタンには独自の状態があります。つまり、独自の「無効」になります。一般に、次のようになります。
class PasswordsContainer extends React.Component {
constructor(props) {
super(props);
const data = [
{
password: 'passwordone',
createdAt: 'Jan 2, 2019',
},
{
password: 'passwordtwo',
createdAt: 'Jan 2, 2019',
},
];
this.state = {
disabled: false,
data: data,
};
this.handleUpdate = this.handleUpdate.bind(this);
}
handleUpdate(element) {
// this.context.executeAction(removePassword, element.createdAt)
// this.context.executeAction(fetchPasswords)
this.setState({
disabled: !this.state.disabled,
});
}
render() {
return (
<div>
{this.state.data.map(element => {
return <Password data={element} />;
})}
</div>
);
}
}
class Password extends React.Component {
constructor(props) {
super(props);
this.state = {
disabled: false,
data: this.props.data,
};
this.handleUpdate = this.handleUpdate.bind(this);
}
handleUpdate(element) {
this.setState({
disabled: !this.state.disabled,
});
}
render() {
let element = this.state.data;
return (
<div>
<input value={element.password} disabled={!this.state.disabled} />
<span
style={{
marginLeft: '15px',
}}>
{' '}
{element.createdAt}
</span>
<span
style={{
marginLeft: '15px',
}}>
<button onClick={() => this.handleUpdate(element)}>
{this.state.disabled ? 'Confirm' : 'Update'}
</button>
</span>
</div>
);
}
}
ReactDOM.render(<PasswordsContainer />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'>
</div>不明な点があれば教えてください
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加