语境
我正在尝试将输入值字段 (conditionTitle
) 从 React Stateless 子组件 (AddConditionSelect
) 传递到父组件 (AddConditionDashboard
) >) 这将保持我的状态。
问题
我遵循了 React documentation 中显示的模型,但他们使用的是 refs,这仅在组件是有状态的情况下才有效。我不想在子组件中设置任何状态,但仍然能够访问父组件中的输入。
在目前的形式中,我收到一个警告,无状态函数组件不能被赋予 refs,导致 props 为 null 和未定义。
父组件:
import AddConditionSelect from '../containers/AddConditionSelect.js';
class AddConditionDashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
conditionTitle: '',
conditionType: ''
};
}
handleUserInput({conditionTitleInput}) {
this.setState({
conditionTitle:conditionTitle
})
}
render() {
const {error, segmentId} = this.props;
return (
<div>
<AddConditionSelect segmentId={segmentId} conditionTitle={this.state.conditionTitle} onUserInput={this.handleUserInput} />
<PanelFooter theme="default">
<Button backgroundColor="primary" color="white" inverted={true} rounded={true} onClick={(event) => this.onSubmit(event)}>
Next Step
</Button>
</PanelFooter>
</div>
);
}
}
export default AddConditionDashboard;
子组件:
class AddConditionSelect extends React.Component {
onInputChange: function() {
this.props.onUserInput(
this.refs.conditionTitleInput.value,
)
},
render() {
const {error} = this.props;
return (
<div>
<Panel theme="info">
<Divider />
Please enter a name {error ? <Message inverted={true} rounded={true} theme="error">{error}</Message> : null}
<Input value={this.props.conditionTitle} ref="conditionTitleInput" label="" type="text" buttonLabel="Add Condition" name="add_segment" onChange={this.onInputChange} placeholder="Condition Title"/>
</Panel>
</div>
);
}
}
export default AddConditionSelect;
最佳答案
如何将事件处理程序直接传递给 <Input>
? ?通过这种方式,您可以将 on change 事件直接传递给您的 parent (<Input>
的祖 parent ),您可以从 event.target.value
中提取值所以不需要使用 refs:
注意:您可能需要 bind
onUserInputChange()
的上下文在你 parent 的构造函数中,因为事件处理程序默认将事件发生的元素作为它们的上下文:
父级
class AddConditionDashboard extends React.Component {
constructor(props) {
// ...
// bind the context for the user input event handler
// so we can use `this` to reference `AddConditionDashboard`
this.onUserInputChange = this.onUserInputChange.bind(this);
}
onUserInputChange({ target }) {
const { value: conditionTitle } = target;
this.setState({
conditionTitle
});
}
render() {
// ...
<AddConditionSelect segmentId={segmentId}
conditionTitle={this.state.conditionTitle}
onUserInputChange={this.onUserInputChange} // <-- pass event handler to child that will pass it on to <Input>
/>
// ...
}
// ...
child :
class AddConditionSelect extends React.Component {
render() {
const { error } = this.props;
return (
<div>
// ...
<Input value={this.props.conditionTitle}
label=""
type="text"
buttonLabel="Add Condition"
name="add_segment"
onChange={this.props.onUserInputChange} // <-- Use the grandparent event handler
placeholder="Condition Title"
/>
// ...
</div>
);
}
}
关于javascript - 通过 Props 将值从 React Stateless Child 传递给 Parent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37554657/