React Autosuggest 输入的访问值

Question

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

我想对我的“添加数据”区域中的一个字段使用 react-autosuggest，它已经以自动建议逻辑的工作方式工作。我的问题是我不知道如何获取在字段中输入的值，因此我的提交函数可以从输入值构建 JSON 并将其传递给 Symfony 控制器，该控制器构建 Doctrine Query 以将其存储在数据库中。

我有两个文件：

在 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 中的状态，以便我的提交函数可以看到并存储它。

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

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

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

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

Answer 1

所以我认为我的问题有一个简单的答案，但我只是不理解 React 的一些关键概念。

我已经阅读了 state 和 props 并决定我需要将数据从我的孩子传递给我的父母。

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

getAutosuggestInput(value){
    // Test logging:
    console.log(value);
    this.setState({myfieldname: value})
}

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

<Autosuggest
    getInputData={this.getAutosuggestInput}
/>

在我的自动建议组件中，我调用了处理更改的事件处理程序内部的函数。你必须在这里使用this.props.functionName functionName 是父函数：

handleChange(event, { newValue }) {
    this.setState({
        value: newValue,
    });
    this.props.getInputData(newValue);
    console.log("New input value:", newValue);
};

因此，我的父级中有一个函数将文本字段值设置为用户刚刚输入的值，该值本身来自子组件handleChange 处理程序，它将值传递给我的父级。当您知道自己在做什么时看起来很容易，但让我告诉您这对我来说很难:)

Answer 2

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

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

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

<Autosuggest inputProps={this.inputProps} />

您的示例比此组件的文档中提供的示例稍微复杂一些，因为您将文本框的值设置为等于文本框名称的状态值。如果您在同一个组件中有多个文本框，这是理想的，否则您可以更改 onChange 方法以将文本框的值设置为名为 value 的状态变量并通过 inputProps 对象。

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