我一直在敲打这个问题好几个小时,可以帮忙。
从根本上说,我要做的是我有两层组件 - 当你点击它时,最后一个应该打开一个模态对话框。由于React的想法是组件应该只改变它自己的状态,我想要传播该数据并设置该变量。
这是布局。 FirstLevel.jsx
文件是我的层次结构的顶部。接下来是SecondLevel.jsx
和ThirdLevel.jsx
,这是点击实际文字的位置。
我不知道任何事情的语法。不确定onUserInput
是否是正确使用的属性,或handleUserClick
是内置事物还是用户定义事物。这里的想法是我试图将回调函数handleUserClick
传播到SecondLevel
。到目前为止这是对的吗?
FirstLevel.jsx
export default class FirstLevel extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogActive: ''
};
this.handleUserClick = this.handleUserClick.bind(this);
}
handleUserClick(dialogActive) {
this.setState({
dialogActive: dialogActive
});
}
render() {
<SecondLevel onUserInput={this.handleUserClick}/>
}
现在,在SecondLevel
上,我将回调函数进一步传播到ThirdLevel
。这是到目前为止这样做的正确方法吗?
SecondLevel.jsx
render () {
//other logic and tags before this
<ThirdLevel onUserInput={this.props.onUserInput}/>
}
现在这个级别是所有地狱都破裂的地方,我不知道我在做什么。在单击时,我想设置向下传播的dialogActive
变量,然后让它浮动。我仍然不知道onUserInput
是否正确,或参数是否正确。一切都非常朦胧,因为它只是通过跟随教程和大量谷歌搜索并从各处扔掉点点滴滴。
ThirdLevel.jsx
export default class ThirdLevel extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.onUserInput(
this.dialogActive.value
);
//show Modal dialog somehow
}
render() {
return <text ref={(input) => this.dialogActive = true} onClick={this.handleClick}> {this.props.value}</text>;
}
最后,我想展示一些模态对话框。单击文本需要显示模式对话框。模态对话框位于另一个名为MyModal.jsx
在ThirdLevel
中,我尝试导入MyModal
并尝试调用showModal
函数。没有工作。然后,我尝试做一些React.createElement(MyModal)
的东西并渲染它,但那不起作用。所有其他的东西,我忘了,只是尝试的东西,直到它的工作,但它没有。我究竟做错了什么?
MyModal.jsx
export default class MyModal extends React.Component {
constructor(props) {
super(props);
this.state = {show: false};
this.showModal = this.showModal.bind(this);
this.hideModal = this.hideModal.bind(this);
}
showModal() {
this.setState({show: true});
}
hideModal() {
this.setState({show: false});
}
render() {
return (
<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName={styles.largeDialogBox}
>
//more modal stuff here
);
}
}
大图:尝试将点击操作传播回层次结构的顶部以设置某个状态,并且单击操作需要打开模式对话框。任何帮助将不胜感激。
修改
我是否在ThirdLevel
?
handleClick() {
this.props.onUserInput(
this.dialogActive.value
);
//show Modal dialog somehow
var newmodal = new MyModal(this.props);
React.render(React.createElement(newModal));
}
render() {
return <text onClick={this.handleClick}> {this.props.value}</text>;
}
修改2
我的ThirdLevel
渲染函数返回:
<div>
<MyModal isDialogActive={this.props.dialogActive} onHideModal={this.props.onUserInput}/>
<tspan onClick={this.handleClick}> {this.props.value} </tspan>
</div>
当它传回SecondLevel
时,它变为:
<text>
<div>
<MyModal isDialogActive={this.props.dialogActive} onHideModal={this.props.onUserInput}/>
<tspan onClick={this.handleClick}> {this.props.value} </tspan>
</div>
</text>
在div
中包装内容很奇怪,但这是使渲染工作的唯一方法。尽管生成的DOM中包含所有标记,但实际的tspan
都没有显示。
答案 0 :(得分:1)
我相信这会让你走上正确的道路。
我建议重构一些函数的名称,因为它确实有点令人困惑。 TrySetViewBoundsAsync
然后handleUserClick
等等。但您已经在OP中提到了这一点。
onUserInput
但是我会问你为什么在// First Level
export default class FirstLevel extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogActive: false
};
this.handleUserClick = this.handleUserClick.bind(this);
}
handleUserClick(dialogActive) {
this.setState({
dialogActive: dialogActive
});
}
render() {
<SecondLevel onUserInput={this.handleUserClick}/>
}
}
// Second Level
...
render () {
//other logic and tags before this
<ThirdLevel onUserInput={this.props.onUserInput}/>
}
...
// Third Level
export default class ThirdLevel extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.onUserInput(true);
}
render() {
return (
<div>
<MyModal isDialogActive={this.props.dialogActive} onHideModal={this.props.onUserInput} />
<button onClick={this.handleClick}>Show Modal</button>
</div>
)
}
}
// Modal
export default class MyModal extends React.Component {
constructor(props) {
super(props);
this.hideModal = this.hideModal.bind(this);
}
hideModal() {
this.props.onUserInput(false);
}
render() {
return (
<Modal
{...this.props}
show={this.props.isDialogActive}
onHide={this.hideModal}
dialogClassName={styles.largeDialogBox}
>
//more modal stuff here
);
}
}
中需要这个逻辑,它不能在组件树的下面。