Question

几天前，我开始学习JavaScript和React，现在我正尝试通过材料设计构建一个简单的表，在该表中，我可以通过简单的表单弹出窗口添加表行，并通过行中的图标删除行。

我想对我的“添加数据”区域中的一个字段使用react-autosuggest，该区域已经按照autosuggest逻辑的工作方式工作了。我的问题是我不知道如何获取在字段中输入的值，因此我的Submit函数可以根据输入值构建JSON，然后将其传递给Symfony控制器，后者会构建Doctrine查询以将其存储在数据库中。

我有两个文件：

在app.js中，是我的整个表体，按钮，对话框等：

render() {
    const { thema, themengebiet, bemerkungen, ansprechpartner } = this.state;

    return (

        <MuiThemeProvider>
            <div>
            <AppBar position="static" color="primary">
              ...
            </AppBar>

            <Paper style={{marginTop: '10px'}}>
            <Table>
                        <TableHead style={{ backgroundColor: 'lightgrey'}}>
                            <TableRow>

                                ...
                            </TableRow>
                        </TableHead>

                <TableBody>
                    ...
                </TableBody>
            </Table>
            </Paper>
            <div style={{ marginTop: '10px', float: 'right'}}>
                <Button variant="contained" color="primary" onClick={this.handleClickOpen}>Neuen Eintrag anlegen</Button>
                <form id="formular" onSubmit={this.handleSubmit}>
// Here comes my Pop Up Dialog, with the autosuggest field:
                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="form-dialog-title"
                >
                    <DialogTitle id="form-dialog-title">Neues Thema vorschlagen</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Bitte alle Felder ausfüllen:
                        </DialogContentText>

                        <TextField
                            autoFocus
                            margin="dense"
                            label="Thema"
                            style={{ marginRight: '10px'}}
                            name="thema"
                            value={thema}
                            onChange={this.onChange}

                        />
                        <Autosuggest
// My hope was I could just define the value of the field like a TextField:
                          value={ansprechpartner} 
// Which does not work        
                        />
                        <TextField
                ...
                        />

我看到您应该将InputProps传递给自动建议的TextField，但似乎我不能只为这样的值传递变量：

在另一个文件autosuggest.js中，我返回：

return (

        <Autosuggest
            theme={{
                container: classes.container,
                suggestionsContainerOpen: classes.suggestionsContainerOpen,
                suggestionsList: classes.suggestionsList,
                suggestion: classes.suggestion,
            }}
            renderInputComponent={renderInput}
            suggestions={this.state.suggestions}
            onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
            onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
            renderSuggestionsContainer={renderSuggestionsContainer}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={{
                classes,
                placeholder: 'Search a country (start with a)',
                value: {myValueHere},
                onChange: this.handleChange,
                'test-id': 'someid',

            }}
        />

    );

我想从app.js中的组件autosuggest.js访问Autosuggest字段的输入值，我希望将其传递给app.js中的状态，以便我的Submit函数可以查看和存储它。

是否有一种简单的方法可以从autosuggest.js的实例的“ InputProps”获取“值”，并将其用于我的app.js文件中？

如果您需要其他代码或信息，请告诉我。

我在这里有一个更完整的代码版本：https://codesandbox.io/s/8l6nz7p3ll（某些部分可能与我上面发布的摘录不同，该版本当然不起作用，因为缺少数据库层/ symfony控制器）

我觉得我在这里缺少一些基本的react / js概念，请随时告诉我，记住我对此完全陌生。

Answer 1

您有正确的想法。我没有使用react-autosuggest库的经验，但是根据文档，您需要通过组件采用的inputProps对象传递onChange方法。这可能有效：

const inputProps = { onChange: this.onChange, name:'textBoxValue' , textBoxValue:this.state.value}

然后将inputProps对象传递给您的AutoSuggest组件。使用您提供的示例，它看起来像：

<Autosuggest inputProps={this.inputProps} />

您的示例比该组件的文档中提供的示例稍复杂，因为您正在将文本框的值设置为与文本框名称相同的状态值。如果您在同一个组件中有多个文本框，那么这是理想的选择，否则您可以更改onChange方法以将文本框的值设置为名为 value 的状态变量，然后通过 inputProps < / em>对象。

有关更多信息，请看一下https://github.com/moroshko/react-autosuggest#installation提供的示例-特别是render和onChange方法中的操作。希望这可以帮助。祝你好运！

Answer 2

因此，我认为对我的问题有一个简单的答案，但我只是不了解React的一些关键概念。

我已经阅读了状态和道具，并决定需要将数据从孩子传递给父母。

为此，我在主文件（App.js）中定义了一个回调函数：

<Autosuggest
    getInputData={this.getAutosuggestInput}
/>

然后我将该函数传递给了autosuggest.js中的组件：

this.props.functionName

在我的自动建议组件中，我在事件处理程序中调用了用于处理更改的函数。您必须在此处使用functionName，其中handleChange(event, { newValue }) { this.setState({ value: newValue, }); this.props.getInputData(newValue); console.log("New input value:", newValue); };是父级中的函数：

handleChange

就像我在父级中有一个将文本字段值设置为用户刚刚输入的函数一样，该值本身来自子组件file = filedialog.asksaveasfile(mode='w', defaultextension=".xls") if file: csvWriter = csv.writer(file, dialect='excel') for ele in arg: lista = list(ele) csvWriter.writerow(lista) file.close()处理程序，该处理程序将该值传递给我的父级。当您知道自己的工作后看起来很简单，但让我告诉您这对我来说很困难：）

反应输入的自动建议访问值

2 个答案: