输入标签：没有输入内容出现答案

【问题标题】：Input tag: nothing typed is appearing输入标签：没有输入内容出现
【发布时间】：2019-09-14 03:12:48
【问题描述】：

我的第一个 React 会话数据存储，非常感谢。我正在尝试设置输入数据，然后将其放入会话存储中，以便以后可以对其进行编辑、查看或删除。有2条数据，“标题”和“注释”要输入到表格中。当我输入表单输入时没有任何反应。也欢迎任何其他帮助。

class AddNote extends Component {
    constructor(props) {
        super(props);

        this.state = {
            title: '',
            content: ''
        }
    }

    componentDidMount() {
        this.getFormData();
    }

    //let notes = getSessionItem(keys.notes);
    //if (!notes) { notes = ""; }

    onTitleChange(event) {
        this.setState({ title: event.target.value }, this.storeFormData);
        this.storeFormData();
    }

    onContentChange(event) {
        this.setState({ content: event.target.value }, this.storeFormData);
    }

    storeFormData() {
        const form = {
            title: this.state.title,
            content: this.state.content
        }
        setSessionItem(keys.user_form, form);
    }

    getFormData() {
        const form = getSessionItem(keys.user_form);
        if (form) {
            this.setState({
                title: form.name,
                content: form.content
            });
        }
    }


    render() {

        return (
            <div>
                <div>
                    <h2>ADD NOTE PAGE</h2>
                </div>

                <form classname="nav1">
                    <div>
                        <label><b>Title</b></label>
                        <input type="text"
                            value={this.state.title}
                            onchange={this.onTitleChange.bind(this)}
                        />
                    </div>

                    <div>
                        <label><b>Content</b></label>
                        <input type="text"
                            value={this.state.content}
                            onchange={this.onContentChange.bind(this)}
                        />
                    </div>
                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}

export default AddNote;

和存储文件：

export const keys = {
    title: 'title',
    notes: 'notes'
}

export const getSessionItem = function (key) {
    let item = sessionStorage.getItem(key);
    item = JSON.parse(item);
    return item;
}

export const setSessionItem = function (key, value) {
    value = JSON.stringify(value);
    sessionStorage.setItem(key, value);
}

export const removeSessionItem = function (key) {
    sessionStorage.removeItem(key);
}

【问题讨论】：

嗨，约翰，检查我的解决方案，如果有帮助，请告诉我。

标签： reactjs forms input

【解决方案1】：

您的输入不需要有 2 个更改处理程序。您可以使用通用的更改处理程序来完成。

<form classname="nav1">
    <div>
        <label><b>Title</b></label>
        <input type="text"
            value={this.state.title}
            name="title"       <---- Provide name here
            onChange={this.onChange}
        />
    </div>

    <div>
        <label><b>Content</b></label>
        <input type="text"
            value={this.state.content}
            name="content"       <---- Provide name here
            onChange={this.onChange}
        />
    </div>
    <button type="submit">Submit</button>
</form>

您的onChange 函数应该是，并在setState 中使用回调来调用您的storeFormData 函数。

onChange = (e) => {
   this.setState({
      [e.target.name] : e.target.value
   }, () => this.storeFormData())
}

注意：在React中，我们使用camelCase，例如，onchange应该是onChange，classname应该是className。

还要确保将this 绑定到storeFormData 和getFormData 函数，或者您可以使用箭头函数自动绑定this。

Demo

【讨论】：