I started to learn JavaScript and React some days ago, right now I am trying to build a simple table with material design where I can add table rows via a simple form popup and delete rows via an icon in the row.
I want to use react-autosuggest for one field in my "add-data" area, which is already working in the way that the autosuggest logic works. My problem is that I have no idea how to grab the value that was entered in the field so my Submit function can build a JSON from the input values and pass it to a Symfony Controller which builds a Doctrine Query to store it in the database.
I have two files:
In app.js is my whole tablebody, buttons, dialog etc:
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 es 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
...
/>
I saw that you are supposed to pass InputProps to the autosuggest TextField but it seems like I can't just pass a variable for the value like this:
In my other file autosuggest.js I return:
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',
}}
/>
);
I want to access the input value of the Autosuggest field from the ponent autosuggest.js in app.js, where I wish to pass it to the state in app.js so my Submit function can see and store it.
Is there an easy way to get the "value" from "InputProps" of the instance from autosuggest.js and use it in my app.js file?
If you need additional code or info please tell me.
I have a more plete code version here: (Some parts may differ from the snippets I posted above, this version is not working of course because the database layer/symfony controller is missing)
I feel like I am missing some essential react/js concepts here, please feel free to tell me so, keep in mind I am totally new to this.
I started to learn JavaScript and React some days ago, right now I am trying to build a simple table with material design where I can add table rows via a simple form popup and delete rows via an icon in the row.
I want to use react-autosuggest for one field in my "add-data" area, which is already working in the way that the autosuggest logic works. My problem is that I have no idea how to grab the value that was entered in the field so my Submit function can build a JSON from the input values and pass it to a Symfony Controller which builds a Doctrine Query to store it in the database.
I have two files:
In app.js is my whole tablebody, buttons, dialog etc:
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 es 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
...
/>
I saw that you are supposed to pass InputProps to the autosuggest TextField but it seems like I can't just pass a variable for the value like this:
In my other file autosuggest.js I return:
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',
}}
/>
);
I want to access the input value of the Autosuggest field from the ponent autosuggest.js in app.js, where I wish to pass it to the state in app.js so my Submit function can see and store it.
Is there an easy way to get the "value" from "InputProps" of the instance from autosuggest.js and use it in my app.js file?
If you need additional code or info please tell me.
I have a more plete code version here: https://codesandbox.io/s/8l6nz7p3ll (Some parts may differ from the snippets I posted above, this version is not working of course because the database layer/symfony controller is missing)
I feel like I am missing some essential react/js concepts here, please feel free to tell me so, keep in mind I am totally new to this.
Share Improve this question asked Jul 25, 2018 at 13:49 Jay-WayJay-Way 3381 gold badge3 silver badges15 bronze badges2 Answers
Reset to default 4So as I thought there was an easy answer to my problem but I just did not understand some key concepts of React.
I've read up on state and props and decided that I need to to pass data from my child to my parent.
For this I defined a callback function in my main file (App.js):
getAutosuggestInput(value){
// Test logging:
console.log(value);
this.setState({myfieldname: value})
}
Then I passed the function to my ponent in autosuggest.js:
<Autosuggest
getInputData={this.getAutosuggestInput}
/>
In my autosuggest ponent I called the function inside of the event handler which handles changes. You have to use this.props.functionName here where functionName is the function in the parent:
handleChange(event, { newValue }) {
this.setState({
value: newValue,
});
this.props.getInputData(newValue);
console.log("New input value:", newValue);
};
So like that I have a function in my parent that sets the textfield value to what was just entered by the user, the value itself es from the child ponents handleChange handler which passes the value to my parent. Looks easy when you know what you do but let my tell you it was hard for me :)
You have the right idea. I have no experience with the react-autosuggest library but based on the documentation, you need to pass in your onChange method via the inputProps object that the ponent takes. This might work:
const inputProps = { onChange: this.onChange, name:'textBoxValue' , textBoxValue:this.state.value}
then pass the inputProps object to your AutoSuggest ponent. Using the example you provided, it would look something like:
<Autosuggest
inputProps={this.inputProps}
/>
Your example is slightly more plicated than what is provided in the documentation for this ponent because you're setting the value of the textbox to a state value that's equal to the name of the textbox. That's ideal if you have multiple textboxes in the same ponent, otherwise you could change your onChange method to set the value of the textbox to a state variable named value and pass that in via the inputProps object.
For more information, take a look at the example provided at https://github./moroshko/react-autosuggest#installation - specifically what's going on in the render and onChange methods. Hope this helps. Good luck!