Question

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

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，因此请查看如何向TextField组件提供onChange属性。

这是清楚的吗？

React将数据传递给组件

1 个答案: