在組件中添加文本區域的值

我希望當我輸入欄位并驗證表單欄位時，在底部添加文本以及所有 AddNote 組件和欄位值。同時在表單驗證時該欄位為空。我的專案看起來很像一個待辦事項串列。

在我在文本欄位中輸入值并驗證表單的那一刻，該值隨著 AddNote 組件進入底部。但是如果我修改文本，值會保持實時變化

// 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;

// 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;

我的應用程式的螢屏

uj5u.com熱心網友回復：

您可以保留一系列筆記并將洗掉按鈕移動到AddNote組件。

嘗試如下：

class AddNote extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h3 className="NoteDetails">date/heure/minutes</h3>
        <span className="NoteLine"></span>
        <div className="notes">
          <p>{this.props.isTextDisplayed && this.props.text}</p>
        </div>
        <button
          type="reset"
          className="deleteBtn"
          onClick={() => this.props.handleDeleteNote(this.props.noteIndex)}
        >
          Supprimer
        </button>
      </React.Fragment>
    );
  }
}

class Note extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "", isTextDisplayed: false, notes: [] };

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

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

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ isTextDisplayed: true });
    this.setState(
      { notes: [...this.state.notes, this.state.value] },
      this.setState({ value: "" })
    );
  }

  handleDeleteNote(index) {
    this.setState({
      notes: this.state.notes.filter((_, itemIndex) => index !== itemIndex)
    });
  }

  render() {
    return (
      <React.Fragment>
        <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>
        </form>

        {this.state.notes.map((note, noteIndex) => (
          <AddNote
            key={noteIndex}
            text={note}
            isTextDisplayed={this.state.isTextDisplayed}
            noteIndex={noteIndex}
            handleDeleteNote={this.handleDeleteNote}
          />
        ))}
      </React.Fragment>
    );
  }
}

ReactDOM.render(<Note />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

標籤：反应 形式 事件

上一篇：創建按鈕時如何解決event.preventDefault的決議錯誤

下一篇：如何在具有不同FormGroup的嵌套陣列中添加驗證？