为什么 React 菜单选择不保持选择？

Question

我试图弄清楚为什么在下面的代码中没有选择笔记文件夹名称的菜单选择。我正在使用文件夹选项周围的标签。用户可以从 UI 中为正在创建的笔记选择文件夹名称，但 UI 不保留选择。结果，便笺不会保存到任何文件夹中。

import React, { Component } from 'react'
import NotesContext from './notesContext'
import './addNote.css'

class AddNote extends Component {
    static contextType = NotesContext
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            value: '',
            id: '',
            folderId: '',
            content: ""
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        console.log("handleChange value: " + event.target.value);
        console.log("handleChange name: " + event.target.name)    
        this.setState(
            {[event.target.name]: event.target.value}
        );
    }

    handleSubmit(event) {
        console.log("this.context: " + JSON.stringify(this.context))
        event.preventDefault();
        let requestOptions = {
          method: 'POST',
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
              "name": this.state.name,
              "id": this.state.id,
              "folderId": this.state.folderId,
              "modified": new Date().toISOString(),
              "content": this.state.content
            })
        };
        fetch("http://localhost:9090/notes/", requestOptions)
          .then(response => response.json())
          .then(result => {
              console.log("result:" + JSON.stringify(result));
              this.context.addNote(
                  result.name, 
                  result.id, 
                  result.folderId, 
                  result.modified,
                  result.content
                );
              this.props.history.push("/");
            })
          .catch(error => console.log('error', error));
    }

    render() {
        let notesContext = this.context
        return (
            <form 
                className="AddNote" 
                onSubmit={e => this.handleSubmit(e)}
            >
                <h1>Create a note</h1>
                <label>
                    Note Name:{' '}
                    <input 
                        type="text" 
                        value={this.state.name}
                        className="NameInput" 
                        name="name" 
                        id="name"
                        onChange={(e) => this.handleChange(e)}
                    />
                </label>

                <label>
                    Content:{' '}
                    <textarea
                        className="ContentInput" 
                        name="content" 
                        id="content"  
                        onChange={e => this.handleChange(e)}
                    />
                </label>

                <label>
                    Folder:{' '}
                    <select 
                        value={this.state.folderId} onChange={ (e) => this.handleChange(e)}>
                        {notesContext.folders.map(folder => {
                            return(
                                <option 
                                    value={folder.name} 
                                    name={folder.name} 
                                    key={folder.id}>{folder.name}
                                </option>
                            )
                        })}
                    </select>
                </label>

                <input 
                    type="submit" 
                    value="Submit"
                    className="SubmitButton"
                />
            </form>
        );
    }
}

export default AddNote;

Answer 1

在这一点上我有一个部分答案。我拆分了用于设置便笺和文件夹的 handleChange 方法。这现在允许我在所选文件夹中创建便笺 - 仅当我选择一个新文件夹而不是默认选择的文件夹时。所以我仍然需要修复那部分。

import React, { Component } from 'react'
import NotesContext from './notesContext'
import './addNote.css'

class AddNote extends Component {
    static contextType = NotesContext
    constructor(props) {
        super(props);
        this.state = {
            name: 'Cows',
            id: '',
            folderId: '',
            content: "",
            value: '',
        }
        this.handleChangeOfNote = this.handleChangeOfNote.bind(this);
        this.handleChangeOfFolder = this.handleChangeOfFolder.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangeOfNote(event) {
        //console.log("handleChange value: " + event.target.value);
        //console.log("handleChange name: " + event.target.name);
        this.setState(
            {[event.target.name]: event.target.value}
        );
    }

    handleChangeOfFolder(event) {
        this.setState(
            {folderId: event.target.value}
        );
    }

    handleSubmit(event) {
        event.preventDefault();
        let requestOptions = {
          method: 'POST',
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
              "name": this.state.name,
              "id": this.state.id,
              "folderId": this.state.folderId,
              "modified": new Date().toISOString(),
              "content": this.state.content
            })
        };
        fetch("http://localhost:9090/notes/", requestOptions)
          .then(response => response.json())
          .then(result => {
              console.log("result:" + JSON.stringify(result));
              this.context.addNote(
                  result.name, 
                  result.id, 
                  result.folderId, 
                  result.modified,
                  result.content
                );
              this.props.history.push("/");
            })
          .catch(error => console.log('error', error));
    }

    render() {
        let notesContext = this.context
        return (
            <form 
                className="AddNote" 
                onSubmit={e => this.handleSubmit(e)}
            >
                <h1>Create a note</h1>
                <label>
                    Note Name:{' '}
                    <input 
                        type="text" 
                        value={this.state.name}
                        className="NameInput" 
                        name="name" 
                        id="name"
                        onChange={(e) => this.handleChangeOfNote(e)}
                    />
                </label>

                <label>
                    Content:{' '}
                    <textarea
                        className="ContentInput" 
                        name="content" 
                        id="content"  
                        onChange={e => this.handleChangeOfNote(e)}
                    />
                </label>

                <label>
                    Folder:{' '}
                    <select 
                        value={this.state.folderId} onChange={(e) => this.handleChangeOfFolder(e)}>
                        {notesContext.folders.map(folder => {
                            return(
                                <option 
                                    value={folder.id} 
                                    name={folder.name} 
                                    key={folder.id}>{folder.name}
                                </option>
                            )
                        })}
                    </select>
                </label>

                <input 
                    type="submit" 
                    value="Submit"
                    className="SubmitButton"
                />
            </form>
        );
    }
}

export default AddNote;

Answer 2

为了解决设置默认文件夹的问题，现在我只是将 folderId 设置为状态，以便它默认存在。

constructor(props) {
    super(props);
    this.state = {
        name: '',
        id: '',
        folderId: 'b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1',
        content: "",
        value: '',
    }