私はまだ(後にそれらを使用してメソッドを呼び出す)親コンポーネントに状態の追跡を維持しながら、動的に反応するコンポーネントに入力フィールドを追加しようとしているCONTEXTは、動的コンポーネント
反応します。
PROBLEM
それについて移動する方法がわからない:親コンポーネント内の状態(urlpath1
、urlpath2
、など)の固定数を定義しなくても
- 。
- 子コンポーネントの固定子孫番号
<Input/>
の子コンポーネントを定義しないでください。
は、これは私の親コンポーネントである - これは関係なく、私が持っているどのように多くのそのような<Input>
のフィールドから、子供/孫コンポーネントの入力要素の状態(または値)を取得する必要があります。
import AddConditionSelect from './AddConditionSelect.jsx';
class AddConditionDashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
//Form Steps States
step: 1,
//AddConditionSelect States
conditionTitle: '',
conditionType: ''
};
// bind the context for the user input event handler
// so we can use `this` to reference `AddConditionDashboard`
this.onUserInputChange = this.onUserInputChange.bind(this);
this.onUserClick = this.onUserClick.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
//TODO: REFACTOR - Can we refactor both these events into one to be used?
onUserInputChange(event) {
this.setState({
conditionTitle: event.target.value
});
}
onUserClick(event) {
this.setState({
conditionType:event.target.value
});
}
onSubmit(event) {
event.preventDefault;
const {create, segmentId} = this.props;
const conditionTitle = this.state.conditionTitle;
const conditionType = this.state.conditionType;
create(conditionTitle, conditionType, segmentId);
//TODO: CALLBACK IF STATEMENT - Check with a callback function if create ran sucessfully, only then do nextste();
if (conditionType == 'urlPath') {
this.setState({
step: 21
});
} else if (conditionType == 'timeOnSite') {
this.setState({
step: 22
});
};
}
render() {
const {error, segmentId} = this.props;
switch (this.state.step) {
//SELECT CONDITION
case 1: return (
<div>
{error ? <Message inverted={true} rounded={true} theme="error">{error}</Message> : null}
<AddConditionSelect
segmentId={segmentId}
onUserClick={this.onUserClick}
conditionTitle={this.state.conditionTitle}
onUserInputChange={this.onUserInputChange}
/>
<PanelFooter theme="default">
<Button
backgroundColor="primary"
color="white"
inverted={true}
rounded={true}
onClick={(event) => this.onSubmit(event)}
>
Next Step
</Button>
</PanelFooter>
</div>
);
//ADD URL PATH
case 21: return (
<div>
<AddConditionCURLPath 'something here' />
<PanelFooter theme="default">
<Button
backgroundColor="primary"
color="white"
inverted={true}
rounded={true}
onClick={(event) => this.onSubmit(event)}
>
Next Step
</Button>
</PanelFooter>
</div>
);
//ADD TIME ON SITE
case 22: return (
<div>
<AddConditionSomethignElse />
<PanelFooter theme="default">
<Button
backgroundColor="primary"
color="white"
inverted={true}
rounded={true}
onClick={(event) => this.onSubmit(event)}
>
Next Step
</Button>
</PanelFooter>
</div>
);
}//End switch
//end render
}
}
export default AddConditionDashboard;
これは私の子コンポーネントである - ここで私は、動的に新しい `フィールド、親コンポーネントに送信する必要があるの値を追加する必要があります。
class AddConditionCURLPath extends React.Component {
render() {
const {error} = this.props;
return (
<div>
<Panel theme="info">
{error ? <Message inverted={true} rounded={true} theme="error">{error}</Message> : null}
<Container>
Configure URL Path - What Pages A Visitor Needs to Visit to meet this conditino
<Divider />
<Input
value={this.props.urlPath}
label=""
type="text"
buttonLabel="Add Condition"
name="add_segment"
onChange={this.props.onUserInputChange}
placeholder="Condition Title"
/>
<Input
value={this.props.urlPath}
label=""
type="text"
buttonLabel="Add Condition"
name="add_segment"
onChange={this.props.onUserInputChange}
placeholder="Condition Title"
/>
<Button
backgroundColor="primary"
color="white"
inverted={true}
rounded={true}
onClick={(event) => this.addInputField(event)}
>
Add Another Input Field
</Button>
</Container>
</Panel>
</div>
);
}
}
export default AddConditionCURLPath;
のステートレスなコンポーネントは、これは再投稿ですか?私は前にこれを見て覚えていると思います。 :)あなたのアプリで 'redux'を使っていますか?もしそうなら 'redux-form'を使ってフォームの状態を追跡して管理することを検討することができます。 – ctrlplusb
アプリで 'Redux'を使用していません。私はちょうどこの問題に遭遇したので、それは再投稿だと疑う... – Dan
ああ、あなたは運が良いかもしれない。問題のstackoverflowを検索してみてください。私はほぼ同じ質問をした人にほぼ肯定的です。それが私の歴史の中にあるかどうかはわかります。 – ctrlplusb