React 向组件传递数据

Question

我有一个父有状态组件，我将显示对话框的状态传递给一个无状态标题组件。 当一个图标单击标题组件时，它会打开一个无状态对话框组件。 在无状态对话框组件中，我希望能够将数据输入到文本字段中。 我是否必须完全更改我的代码才能使无状态对话框成为有状态组件？ 下面是我的代码。如果有人可以推荐这样做的最佳方法。谢谢。

class Layout extends Component {
    state = {
      show:false  
    }

    toggleSidenav = (action) =>{
        this.setState({
            showDialog:action
        })
    }

    render(){
        return(
            <div>
                <Header
                    showNav={this.state.showDialog}
                    onHideNav={() => this.toggleSidenav(false)}
                    onOpenNav={() => this.toggleSidenav(true)}
                />
            </div>
        )
    }

}
export default Layout;

标题组件

const Header = (props) => {
    console.log(props.onOpenNav)

    const navBars = () => (
        <div>
            <AppBar position="static">
                <Toolbar>
                    <IconButton color="inherit" aria-label="createfolder">
                        <SvgIcon>
                            <path d={createfolder}
                                 onClick={props.onOpenNav}
                                name="firstName" />
                        </SvgIcon>
                    </IconButton>
                </Toolbar>
            </AppBar>
        </div>
    )
    return (
        <div>
            <SideNav {...props} />
            <div>
                {navBars()}
            </div>
        </div>
    )
}

对话框组件

const DialogBox = (props) => {
    return (
        <div>
            <Dialog
                open={props.showNav}
                aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">Add Folder</DialogTitle>
                <DialogContent>
                    <TextField
                        margin="normal"
                    />
                </DialogContent>
                 <DialogActions>
              <Button onClick={props.onHideNav} color="primary">
              Cancel
      </Button>
          <Button onClick={props.onHideNav} color="primary"
              onChange={this.handleFieldChange}
              value={this.value}
             >
              Create
      </Button>
          </DialogActions>

            </Dialog>
        </div>
    )
}

Answer 1

因为组件Header 很容易有状态。您可以将其状态初始化为

state = {
      show:false,
      formData: {}  //later, you may save user input from the child component here 
    }

在Header组件中，你可以添加一个函数：

handleInputEntered = (event) => {
  const _data = { ...this.state.formData };
  _data[event.target.name] = event.target.value;

  this.setState({
    formData: _data
  });
}

并确保将这个新函数作为道具传递给这样的：

<Header 
    handleInputEntered = {this.handleInputEntered}
    />

并将onChange 设置为您有输入字段的新功能：

<TextField
           onChange={this.props.handleInputEntered}     
                    />

您似乎正在使用MaterialUI，因此只需查看如何将onChange 属性提供给TextField 组件即可。

这清楚吗？