React提交textarea表单添加AddNote笔记并清空输入框问题

问题描述 #

开发类Todo List笔记应用，预期实现交互：

• 在textarea输入框填写内容、触发表单校验提交后，输入文本作为独立笔记通过AddNote组件追加展示在页面底部
• 提交完成后输入框自动清空

当前实现存在两个异常：

• 提交后输入框内容不会自动清空
• 修改输入框文本时，已展示在底部的笔记内容会跟随输入实时变动

原有问题代码 #

note.js

// in note.js
import React from 'react';
import AddNote from './addnote';

class Note extends React.Component {

    constructor(props) {
        super(props);
        this.state = { value: '', isTextDisplayed: false };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSubmit(event) {
        event.preventDefault();
        this.setState({ isTextDisplayed: true });
    }

    render() {
        return (
            <>
                <div className='title'>
                    <h1>Notes</h1>
                    <span className="LineTitle"></span>
                </div>
                <form id="form" onSubmit={this.handleSubmit}>
                    <textarea className="textNote" id="textZone" value={this.state.value} onChange={this.handleChange}></textarea>
                    <button type="submit" className="addBtn">Ajouter</button>
                    <button type="reset" className="deleteBtn" >Supprimer</button>
                </form>

                <AddNote text={ this.state.value } isTextDisplayed={ this.state.isTextDisplayed } />
                
            </>
        )
    }
}

export default Note;

addnote.js

// in addnote.js
import React from 'react';
import Note from './note';

class AddNote extends React.Component {
    render() {
        return (
            <>
                <h3 className="NoteDetails">date/heure/minutes</h3>
                <span className="NoteLine"></span>
                <div className="notes">
                    <p>{ this.props.isTextDisplayed && this.props.text }</p>
                </div>

            </>
        )
    }
}

export default AddNote;

问题根因 #

• 提交逻辑仅修改了isTextDisplayed标记位，未将输入框双向绑定的value状态重置为空字符串，导致提交后输入框内容无法清空
• 直接将和输入框实时绑定的state.value作为props传给展示组件，该状态会随输入操作实时更新，导致已展示的笔记内容同步变动
• 状态设计缺陷：仅用单个字符串值存储输入内容，没有用独立数组存储已提交的笔记，无法实现多条笔记追加展示的效果
• addnote.js中多余引入Note组件，存在循环依赖风险

修复方案 #

note.js 修改点 #

• 新增notes数组状态，专门持久化存储所有已提交的笔记内容
• 提交表单时增加非空校验，校验通过后将当前输入值追加到notes数组，同时将输入框绑定的value重置为空，实现输入框自动清空
• 遍历notes数组渲染所有AddNote组件，支持多条笔记追加展示

修复后代码：

// in note.js
import React from 'react';
import AddNote from './addnote';

class Note extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            value: '', // 绑定输入框实时输入内容
            notes: [] // 存储所有已提交的笔记
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSubmit(event) {
        event.preventDefault();
        // 空内容不提交
        if (!this.state.value.trim()) return;
        this.setState(prev => ({
            notes: [...prev.notes, prev.value.trim()],
            value: '' // 提交后清空输入框
        }));
    }

    render() {
        return (
            <>
                <div className='title'>
                    <h1>Notes</h1>
                    <span className="LineTitle"></span>
                </div>
                <form id="form" onSubmit={this.handleSubmit}>
                    <textarea className="textNote" id="textZone" value={this.state.value} onChange={this.handleChange}></textarea>
                    <button type="submit" className="addBtn">Ajouter</button>
                    <button type="reset" className="deleteBtn" >Supprimer</button>
                </form>
                {/* 遍历渲染所有已提交笔记 */}
                {this.state.notes.map((note, index) => (
                    <AddNote key={index} text={note} />
                ))}
            </>
        )
    }
}

export default Note;

addnote.js 修改点 #

• 删除多余的Note组件引入，消除循环依赖风险
• 移除冗余的isTextDisplayed判断逻辑，组件渲染时直接展示传入的固定笔记文本即可

修复后代码：

// in addnote.js
import React from 'react';

class AddNote extends React.Component {
    render() {
        return (
            <>
                <h3 className="NoteDetails">date/heure/minutes</h3>
                <span className="NoteLine"></span>
                <div className="notes">
                    <p>{this.props.text}</p>
                </div>
            </>
        )
    }
}

export default AddNote;

内容的提问来源于stack exchange，提问作者LAYAN_Jason