Question

我需要将filterArray数据从组件Content传输到组件TableGenerator。它们都是App.js的子组件

我试图将数据从组件Content.js传输到组件TableGenerator.js，它们都是App.js的子组件。您可以在这里看到我的工作：

类应用扩展了组件{

updateData = (value) => {
    this.setState({filterArray: value})
}

render() {
    return (
        <div className="App">
            <Header/>
            <br></br>
            <Content updateData={this.updateData}/>
            <br></br>
            <TableGenerator data={this.state.filterArray}/>
        </div>
    );
}

function TableGenerator（）{

const allUsers = [
    {пизда: "Александра"},
    {пизда: "Шура"},
    {пизда: "Пиздец"},
    {пизда: "Бля"},
    {пизда: "Заебалась"},
    {пизда: "Я"},
    {пизда: "Короче"}
];

return (
    <Paper style={{maxWidth: 936, marginLeft: '250px'}}>
        <Table>
            <TableHead>
                <TableRow>
                    {Object.keys(allUsers[0]).map((TableRow, i) => (
                        <TableCell key={i} align="center">{TableRow.split("_").join(" ")}</TableCell>
                    ))}
                </TableRow>
            </TableHead>
            <p>Props: {this.props.filterArray}</p>
            <TableBody>
                {allUsers.map((user, i) => (
                    <TableRow key={i}>
                        {Object.values(user).map((v, j) => (
                            <TableCell key={j} align="center">{v}</TableCell>
                        ))}
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    </Paper>
);

类内容扩展了React.Component {

constructor(props) {
    super(props);
    // initial state
    this.state = {
        textInput: '',
        filterArray: []

    }
}

clear = () => {
    // return the state to initial
    this.setState({
        textInput: ''
    })
}

parseInput = () => {
    let tempArray = this.state.textInput.split(" ");// `convert string into array`
    this.state.filterArray = tempArray.filter(word => word.endsWith('*'));
}


render() {
    return (
        <Paper style={{maxWidth: 936, marginLeft: '250px', overflow: 'hidden'}}>
            <AppBar position="static" color="default" elevation={0}>
                <Toolbar>
                    <Grid container spacing={16} alignItems="center">
                        <Grid item xs>
                            <TextField
                                fullWidth
                                placeholder="Введите фразу которую нужно обучить"
                                id='textInput'
                                InputProps={{
                                    disableUnderline: true,
                                }}
                                value={this.state.textInput}
                                onChange={(e) => {
                                    this.setState({textInput: e.target.value})
                                }}
                            />
                        </Grid>
                        <Grid item>
                            <Button
                                variant="contained"
                                color="primary"
                                style={{background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)'}}
                                onClick={this.parseInput()}
                            >
                                Обучить
                            </Button>

                            <Button
                                variant="contained"
                                color="primary"
                                style={{background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)'}}
                                onClick={() => {
                                    this.props.updateData(this.state.filterArray)
                                }}
                            >
                                Генерировать
                            </Button>
                            <Tooltip title="Сбросить">
                                <IconButton>
                                    <RefreshIcon color="inherit" style={{display: 'block'}} id='clearButton'
                                                 onClick={this.clear}/>
                                </IconButton>
                            </Tooltip>
                        </Grid>
                    </Grid>
                </Toolbar>
            </AppBar>
        </Paper>
    );
}

Answer 1

两个错误（1）Content.js中的parseInput（），update state using setState()（2）您的道具名称是data中的TableGenerator，但是您正在访问this.props.filterArray，应该是this.props.data
我已经按照您的代码创建了sandbox。它将数据从Content.js传递到TableGenerator.js。

 parseInput = () => {
    let tempArray = this.state.textInput.split(" "); // `convert string into array`
    let filterArray = tempArray.filter(word => word.endsWith("*"));
    this.setState({ filterArray });
  };

如何设置组件之间的数据传输？

1 个答案: