CONTEXT
我正在尝试传递输入值字段(conditionTitle
)来自 React 无状态子组件(AddConditionSelect
) 到父组件 (AddConditionDashboard
)这将保持我的状态。
PROBLEM
我按照图中所示的模型进行操作反应文档 http://facebook.github.io/react/docs/thinking-in-react.html,但他们使用的是 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>
?通过这种方式,您可以将更改事件直接传递给您的父母(祖父母)<Input>
),您可以从中提取值event.target.value
所以不需要使用 refs:
Note:你可能必须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>
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)