mercredi 2 septembre 2020

Update arrays with React form

I'm React beginner and I've a question. I want to update some arrays with a form. I have these arrays.

state = {
            loading: true,
            projects: [],
            tokens: [] ,
            authors: [] ,
            branches: [] }

Then i have 2 SELECT and a INPUT. When a select a value from a select (e.g: a value from select "branch"), i want to add the value to his array (in this example, to "branches"). When I complete the 3 form elements, there have to be 2 buttons.

1 - "Submit" button the form with current arrays.

2 - "Add" button to add current values to their arrays.

                                <div class='forminput'>
                                    <label for="key" id="keyLabel" class="login-label"><strong>Project key</strong></label>
                                    <select id="key"
                                        name="key"
                                        class="login-input"
                                        onChange={this.onChangeProject} required>
                                        {projectsList}
                                    </select>
                                </div>
                                <div class='forminput'>
                                    <label for="branch" id="branchLabel" class="login-label"><strong>Branch key</strong></label>
                                    <select id="branch"
                                        name="branch"
                                        class="login-input" required>
                                        {branchesList}
                                    </select>
                                </div>
                                <div class='forminput'>
                                    <label for="author" id="authorLabel" class="login-label"><strong>Author</strong></label>
                                    <input type="text"
                                        id="author"
                                        name="author"
                                        class="login-input"
                                        maxlength="255"
                                        required
                                        placeholder="Report's author" value={this.state.author}
                                        onChange={this.onChangeAuthor} />
                                    <input type="hidden" name="token" id="token_cnesreport" defaultValue={this.state.token} />
                                </div>
<button type="button" onClick={this.handleAdd}>Add</button>
<input id="generation" name="generation" type="submit" value="Generate" /><br />




Aucun commentaire:

Enregistrer un commentaire