私はreactjsとreduxを使ってダッシュボードを開発しています。私は追加、削除を行ったが、編集は機能していない。ユーザーがアイテムをクリックすると、テキストフィールドに現在の値が表示され、変更を送信できます。クリックするとテキストフィールドを表示できますが、クリックされたアイテムの現在の値は表示できませんでした。 textFieldを表示するには、liタグでonClickを使用する必要があります。そうでないと、this.props.editTab(タブ)のようなデータを渡すことができます。クリックしたアイテムのデータをeditTabアクションに送信するにはどうしたらいいですか?クリックしたリストの値を編集するEditFormに渡します
constructor(props) {
super(props);
this.state = { open: false, editing: false };
}
editTab() {
const tabs = _.map(this.props.tabs, (tab) => {
if (tab.editable) {
return (
<li
className="list-group-items delete-tab-list"
onClick={() => this.setState({ editing: true })}
key={tab.id}
>
<i className="material-icons">{tab.icon}</i>{tab.name}
</li>
);
}
});
return (
<div className="device-action">
<Dialog
title="Update a Tab"
modal={false}
bodyStyle={{ background: '#fff' }}
contentStyle={customContentStyle}
actionsContainerStyle={{ background: '#fff' }}
titleStyle={{ background: '#fff', color: '#1ab394' }}
open={this.props.createTab.open}
onRequestClose={this.props.closeTabIcon}
>
<ul className="list-group">
{ this.state.editing ?
<EditForm
tab={this.props.tabs}
editing={this.state.editing}
/> :
tabs
}
</ul>
</Dialog>
</div>
);
}
handleEditSave = (name, icon) => {
this.props.editTab(name, icon);
}
render() {
return (
<div>
<form onSubmit={this.handleEditSave}>
<div className="tab-name">
<TextField
floatingLabelText="Name"
onChange={(name) => { this.setState({ name: name.target.value }); }}
/>
</div>
<div className="icon">
<AutoComplete
floatingLabelText="select any icon"
filter={AutoComplete.noFilter}
openOnFocus
onNewRequest={(e) => { this.setState({ icon: e.id }); }}
/>
</div>
<button className="btn">Save</button>
</form>
</div>
);
}
どのように私はthis.props.editTab(タブ)で、このように自分の行動を誘発することができるようにのEditFormコンポーネントに項目データをクリック渡すことができますか?
そうでなければ、オブジェクト/配列の手段を使用する必要があります。私は編集を使用する必要があります:[]?このソリューションは機能しますが、アイテムをクリックすると他のアイテムは消えます。私はあなたが言ったように一度に一つしか編集できません。 – Serenity
うん、 '編集 'をオブジェクト/配列に変え、編集する必要のあるタブをループしてください。 – Ido
あなたはこれについて私を助けることができますhttp://stackoverflow.com/questions/40079744/submit-form-data-in-each-step? – Serenity