Question

我想将onChange从孩子传递给父母。我什至不知道那是否是正确的放置方式。但是这是我的代码。该代码以前可以工作，但是我试图将我的代码分解为较小的组件并处理错误。如果您想要更多代码，很高兴与您分享。我对React有点陌生。我不知道我在做什么错。错误基本上是使用event的函数没有得到任何东西。

父母：

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

孩子：

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

在React中将onChange事件从子级传递到父级

2 个答案: