Как передать value input в setState React по клику

Question

Помогите пожалуйста, не получается передать правильно значение input в state. Хочу при клику создать новое сообщение, текст взять из state. Если пушить значение через функцию addText, то пушиться каждый символ. App.js

import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid'
import './App.css';
import AddTaskForm from './AddTaskForm/AddTaskForm';
import Task from './Task/Task';

function App() {  
  const [todo, setTodos] = useState([
    {id: uuidv4(), text: 'go home'}
  ]);
  let addText = (e, id) => {
    const index = todo.findIndex(item => item.id === id);
    const todos = {...todo[index]};
    todos.text = e.target.value;
    console.log(todos.text);
    const copyTodo = [...todo];      
    copyTodo[index] = todo;
    setTodos(copyTodo);
  };
  let addTodo = (e, id) => {
    const index = todo.findIndex(item => item.id === id);
    const todos = {...todo[index]};
    todos.text = e.target.value;
    const copyTodo = [...todo];      
    copyTodo[index] = todos;      
    copyTodo.push({id: uuidv4(), text: todos.text});
    setTodos(copyTodo);
  };
   
  let AddTasks = todo.map(item => {
    return <AddTaskForm key={item.id} text={item.text} onRemove={() => removeTask(item.id)} />
  });
  return (
    <div className="App">
    <Task onChange={(e) => addText(e, todo.id)}  onClick={(e) => addTodo(e, todo.id)}/>
    {AddTasks}
    </div>
    );
  }
  
  export default App;

Task.js

const Task = props => {
    return (
        <div className='task'>
            <input  placeholder='Add new task' className="task_input" onChange={props.onChange} />
            <button className="task_add" onClick={props.onClick}>Add</button>
        </div>
    )
};
export default Task;

AddTaskForm.js

const AddTaskForm = props => {
    return (
        <div className='task_wrapper'>
            <h5 className="task_text">{props.text}</h5>
        </div>
    )
    };
export default AddTaskForm;

Answer 1

Пример в песочнице:

https://codesandbox.io/s/wizardly-night-ul6hr?file=/src/App.js:0-1323

Пример кода:

import React, { useState } from "react";

const AddTaskForm = (props) => {
  return (
    <div className="task_wrapper">
      <h5 className="task_text">{props.text}</h5>
      <button onClick={props.onRemove}>X</button>
    </div>
  );
};

const Task = (props) => {
  return (
    <div className="task">
      <input
        placeholder="Add new task"
        className="task_input"
        onChange={props.onChange}
        value={props.value}
      />
      <button className="task_add" onClick={props.onClick}>
        Add
      </button>
    </div>
  );
};

function App() {
  const [todo, setTodos] = useState([]);
  const [text, setText] = useState("");
  const onChangeText = (event) => {
    setText(event.target.value);
  };

  const onAddTask = (index) => {
    setTodos((prevState) => [...prevState, { text, id: index }]);
    setText("");
  };

  const onRemove = (id) => {
    setTodos((prevState) => prevState.filter((item) => item.id !== id));
  };

  return (
    <div className="App">
      <Task
        onChange={(e) => onChangeText(e)}
        onClick={onAddTask}
        value={text}
      />
      {todo.map((item) => (
        <AddTaskForm
          key={item.index}
          text={item.text}
          onRemove={() => onRemove(item.id)}
        />
      ))}
    </div>
  );
}

export default App;

БЛОГ НА HUSL

Как передать value input в setState React по клику

Ответы (1 шт):