React表单提交时获取textarea值并展示在AddNote组件中

需调整的核心逻辑 #

• 父组件note.js新增笔记列表状态，表单提交时先校验输入内容，非空合法内容追加到列表后清空输入框
• 父组件遍历已存储的笔记列表，将每条笔记的内容、创建时间通过props传入AddNote子组件
• 子组件addnote.js删除会造成循环引用的Note组件引入，接收父组件传递的参数渲染到对应标签位置
• 补充重置按钮的点击逻辑，点击后清空当前输入框内容

修改后完整代码 #

note.js 文件 #

import React from 'react';
import AddNote from './addnote';

class Note extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputValue: '',
            notesList: []
        };

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

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

    handleSubmit(event) {
        event.preventDefault();
        const submitContent = this.state.inputValue.trim();
        // 空内容拦截，不执行提交
        if (!submitContent) return;
        
        const newNote = {
            id: Date.now(),
            content: submitContent,
            createTime: new Date().toLocaleString()
        };

        this.setState({
            notesList: [...this.state.notesList, newNote],
            inputValue: ''
        });
    }

    handleReset() {
        this.setState({ inputValue: '' });
    }

    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.inputValue} 
                        onChange={this.handleChange}
                    ></textarea>
                    <button type="submit" className="addBtn">Ajouter</button>
                    <button 
                        type="reset" 
                        className="deleteBtn"
                        onClick={this.handleReset}
                    >Supprimer</button>
                </form>

                {this.state.notesList.map(note => (
                    <AddNote 
                        key={note.id} 
                        noteContent={note.content} 
                        createTime={note.createTime} 
                    />
                ))}
            </>
        )
    }
}

export default Note;

addnote.js 文件 #

import React from 'react';

class AddNote extends React.Component {
    render() {
        const { noteContent, createTime } = this.props;
        return (
            <>
                <h3 className="NoteDetails">{createTime}</h3>
                <span className="NoteLine"></span>
                <div className="notes">
                    <p>{noteContent}</p>
                </div>
            </>
        )
    }
}

export default AddNote;

效果说明 #

• 输入框填写内容后点击提交按钮，非空笔记会自动追加展示在页面下方
• 每条笔记自动记录提交时间，和内容同步渲染
• 点击重置按钮仅清空当前输入框内容，已提交的笔记不受影响

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