React is not changing the state of the parent element

Austris

I'm building simple todo app in react and I have made input field as part of inputForm element which is child element.

I can pass functions as props from parent to child without problem, but I can't update parent state to store value on input field. When I type in input field, passed function is executing normally but currentTodo state is not updating.

I have found that this problem can be avoided by using single data flow pattern (like Flux or Reflux) but as this is my first project I want to understand how to work with basics.

Code for parent element:

import React, { Component } from 'react';
import './App.css';
import InputForm from '../components/InputForm'
import {Task} from '../components/Task'

class App extends Component {

    constructor(){
        super();
        this.state = {
            tasks: ["Todo", "Toda"],
            currentToDo: "",
        };
    }


//makes copy of task array, pushes current to do to copy and setsState 
//with new values
    addTodo = () => {
        console.log("addTodo")
        let copy = this.state.tasks.slice();
        console.log(this.state.currentToDo)
        copy.push(this.state.currentToDo);
        this.setState({tasks: copy});
    }

//gets input value from input field and updates current todo
    onInputChange = e => {
        console.log(e.target.value);
        this.setState({ currentTodo: e.target.value })
    }

  render() {
      let drawTask = this.state.tasks.map(e => {
          return <Task todo={e}/>
      })

    return (
        <div className="container">
            <InputForm onInputChange={() => this.onInputChange} add={this.addTodo}/>
            {drawTask}
        </div>
    );
  }
}

export default App;

Code for child element:

import React, { Component } from 'react';
import './component.css';
import {AddButton} from './Buttons.js'

class InputForm extends Component{
    constructor(){
        super();
        this.state = {

        }
    }

    render(){
        return(
            <div className='taskHeader'>
 {/*Value of current todo is send as props from parent element*/}
                <input value = {this.props.currentToDo} onChange={this.props.onInputChange()} type="text"/>
                <AddButton add = {this.props.add}/>
            </div>
        )
    }
}

export default InputForm;
jens

You are calling the function during the render rather than passing a reference.

Parent owns the function and needs to pass it to the child:

<InputForm onInputChange={this.onInputChange} add={this.addTodo}/>

Now that the child has a prop called onInputChange, you pass it to the onChange callback as a reference.

<input value={this.props.currentToDo} onChange={this.props.onInputChange} type="text"/>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Opposite react component state changing

分類Dev

Why changing value in state doesn't trigger onChange of input element in REACT

分類Dev

Parent element changing when javascript applies a transformation

分類Dev

Changing parent controller property from child state in uiRouter

分類Dev

React update child state from parent component

分類Dev

Changing a caret button on hovering over its parent element

分類Dev

axios cannot resolve state element react

分類Dev

React state update only updates one element

分類Dev

React - expressions must have one parent element?

分類Dev

Changing state in React native App.js from another component

分類Dev

Changing state even when the react-tabs component is not selected

分類Dev

React renders without actually changing the state when setInterval is used

分類Dev

Changing background color depending on state in react.js

分類Dev

React Child Calling Parent Method Can't Access State

分類Dev

React hooks - set state of Parent from child via function

分類Dev

Update an element in an array object at state by using textInput React Native

分類Dev

the state value not changing

分類Dev

React, get bound parent dom element name within component

分類Dev

Typescript-React State: Element implicitly has an 'any' type because type 'State' has no index signature

分類Dev

Changing the position of element with Javascript

分類Dev

Changing the right element

分類Dev

change child components' state from parent (exclusive clickable box component with React)

分類Dev

How do I transmit a state to a parent component when clicking a react-router Link?

分類Dev

React 16.8 hooks - child component won't re-render after updating parent state

分類Dev

React-router-dom how to update parent state inside route component

分類Dev

Changing state based on parameter in reactjs

分類Dev

Fix Anchoring when changing parent

分類Dev

Pass child state value to Parent state array

分類Dev

Why does my React app menu open when I am only changing the state and am not using any CSS?

Related 関連記事

  1. 1

    Opposite react component state changing

  2. 2

    Why changing value in state doesn't trigger onChange of input element in REACT

  3. 3

    Parent element changing when javascript applies a transformation

  4. 4

    Changing parent controller property from child state in uiRouter

  5. 5

    React update child state from parent component

  6. 6

    Changing a caret button on hovering over its parent element

  7. 7

    axios cannot resolve state element react

  8. 8

    React state update only updates one element

  9. 9

    React - expressions must have one parent element?

  10. 10

    Changing state in React native App.js from another component

  11. 11

    Changing state even when the react-tabs component is not selected

  12. 12

    React renders without actually changing the state when setInterval is used

  13. 13

    Changing background color depending on state in react.js

  14. 14

    React Child Calling Parent Method Can't Access State

  15. 15

    React hooks - set state of Parent from child via function

  16. 16

    Update an element in an array object at state by using textInput React Native

  17. 17

    the state value not changing

  18. 18

    React, get bound parent dom element name within component

  19. 19

    Typescript-React State: Element implicitly has an 'any' type because type 'State' has no index signature

  20. 20

    Changing the position of element with Javascript

  21. 21

    Changing the right element

  22. 22

    change child components' state from parent (exclusive clickable box component with React)

  23. 23

    How do I transmit a state to a parent component when clicking a react-router Link?

  24. 24

    React 16.8 hooks - child component won't re-render after updating parent state

  25. 25

    React-router-dom how to update parent state inside route component

  26. 26

    Changing state based on parameter in reactjs

  27. 27

    Fix Anchoring when changing parent

  28. 28

    Pass child state value to Parent state array

  29. 29

    Why does my React app menu open when I am only changing the state and am not using any CSS?

ホットタグ

アーカイブ