javascript - Passing onChange event from child to parent in React - Stack Overflow

admin管理员组

文章数量:1302929

I want to pass the onChange from child to parent. I don't even know if that is the correct way of putting it. But here is my code. The code worked previously but I am trying to break down my code into smaller ponents and dealing with the errors. If you would like more code, I am happy to share. I am a bit new to React. I don't know what I am doing wrong. The error is basically that the function which takes the event isn't getting anything.

Parent:

        <Inputs hasInputs={hasInputs} onSubmit={this.handleSubmit} thoughtProp={this.state.thought} onChange={this.handleChange} />

Child:

import React from 'react'
import { Input } from '../Input.js'

export const Inputs = (props) => {
    return (
    <form className="flex-item-main form" onSubmit={props.onSubmit}>
        <ol>
            {props.thoughtProp.map((input, index) => (
            <Input type='text' onSubmit={props.onSubmit} key={index} value={input} onChange={(event) => props.onChange(event, index) } className='textInputs' />
            ))}
            { props.hasInputs ? (
            <input className='submitThoughts' type='submit' value='Submit Thought!' />
            ) : (
            null
            )}
        </ol>
    </form>
    )
}

I want to pass the onChange from child to parent. I don't even know if that is the correct way of putting it. But here is my code. The code worked previously but I am trying to break down my code into smaller ponents and dealing with the errors. If you would like more code, I am happy to share. I am a bit new to React. I don't know what I am doing wrong. The error is basically that the function which takes the event isn't getting anything.

Parent:

        <Inputs hasInputs={hasInputs} onSubmit={this.handleSubmit} thoughtProp={this.state.thought} onChange={this.handleChange} />

Child:

import React from 'react'
import { Input } from '../Input.js'

export const Inputs = (props) => {
    return (
    <form className="flex-item-main form" onSubmit={props.onSubmit}>
        <ol>
            {props.thoughtProp.map((input, index) => (
            <Input type='text' onSubmit={props.onSubmit} key={index} value={input} onChange={(event) => props.onChange(event, index) } className='textInputs' />
            ))}
            { props.hasInputs ? (
            <input className='submitThoughts' type='submit' value='Submit Thought!' />
            ) : (
            null
            )}
        </ol>
    </form>
    )
}

• javascript
• reactjs
• react-native
• events
• ponents

Share Improve this question Follow asked Jun 11, 2020 at 22:05 Andrew LovatoAndrew Lovato 13333 silver badges1111 bronze badges 1

• could you please put the console.log in your onChange function and post what is getting you inside the onChange function in event. – Waheed Akhtar Commented Jun 11, 2020 at 22:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Change Parent Component State from Child using hooks in React

Child ponent holds the Input field and we are going to send the input field value to the Parent ponent. So let’s create the Parent ponent first.

Parent.js

import Child from "./Child";
   function Parent() {
        const [name, setName] = useState("");
        const [password, setPassword] = useState("");
    
        const onChangeName=(newValue)=>{
          setName(newValue);
        }
    
        const onChangePassword=(value)=>{
          setPassword(value);
        }
        // We pass a callback to Child
        return (
       <Child  onChangeName={onChangeName} onChangePassword={onChangePassword} />;
    )}

As you see that we set the onChange property to the Child ponent. Next step is to create the Child ponent.

Child.js

    function Child(props) {
           
 return(
 <input  onChange={(e)=>{props.onChangeName(e.target.value)}} />
 <input  onChange={(e)=>{props.onChangePassword(e.target.value)}} />
       )}

On the above codes, we have created function handleChange that will pass the value through props.onChange to our Parent ponent.

Where is the handleChange function? In your Input ponent, next to your onSubmit={props.onSubmit} you should have onChange={props.onChange}.

To do this, you have to implement it as follows..

Parent:

<Inputs
  hasInputs={hasInputs}
  onSubmit={this.handleSubmit}
  thoughtProp={this.state.thought}
  onChange={(event, index) => this.handleChange(event, index)}
/>;

Child:

import React from 'react';
import { Input } from '../Input.js';

export const Inputs = (props) => {
  return (
    <form className="flex-item-main form" onSubmit={props.onSubmit}>
      <ol>
        {props.thoughtProp.map((input, index) => (
          <Input
            type="text"
            onSubmit={props.onSubmit}
            key={index}
            value={input}
            onChange={(event, index) => props.onChange(event, index)}
            className="textInputs"
          />
        ))}
        {props.hasInputs ? (
          <input
            className="submitThoughts"
            type="submit"
            value="Submit Thought!"
          />
        ) : null}
      </ol>
    </form>
  );
};

本文标签： javascriptPassing onChange event from child to parent in ReactStack Overflow