在React中把onChange事件从子代传给父代。

Question

我想通过 onChange 从孩子到父母。我甚至不知道这样说是否正确。但这是我的代码。之前的代码是可以工作的，但我正试图将我的代码分解成更小的组件并处理错误。如果你想得到更多的代码，我很乐意分享。我对React有点陌生。我不知道我做错了什么。基本上，错误是，在函数中取用了 event 是不是得到了什么。

父母：

        <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>
    )
}

Answer 1

handleChange函数在哪里？在你的输入组件中，在你的 onSubmit={props.onSubmit} 你应该有 onChange={props.onChange}.

Answer 2

要做到这一点，你必须实现它，如下。

父代:

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

子女：

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>
  );
};