Question

我正在构建一个更高的组件，其中字段输入与其他一些组件组合在一起。我正在尝试将我的onChange函数传递给子组件，以便它可以使用新输入更改状态。所有其他道具都传递得很好，我可以看到使用chrome开发工具，但即使我可以看到onChange函数，如果我console.log上的子项上的道具，它不存在于窗体控件组件，最终创建输入文本字段。

以下是代码，您可以在表单中注意呈现未使用更高InputFieldGroup组件的FormGroup：

higher_component.js

import React from 'react'
import * as FormGroup from 'react-bootstrap/lib/FormGroup'
import * as ControlLabel from 'react-bootstrap/lib/ControlLabel'
import * as FormControl from 'react-bootstrap/lib/FormControl'

export const InputFieldGroup = (props) =>
  <FormGroup
    controlId={props.controlId}
    validationState={props.validationState()}>
    <ControlLabel>{props.controlLabel}</ControlLabel>
    {console.log(props)} {/* I CAN SEE THE ONCHANGE FUNCTION HERE */}
    <FormControl
      type={props.type}
      name={props.name}
      value={props.value}
      placeholder={props.placeholder}
      onChange={props.handleChange}
    />
    <FormControl.Feedback />
  </FormGroup>

form.js

export default class RequestQuote extends Component {
  ...Some other class methods and stuff

  handleTextChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  render() {
    return(
      <form>

        <InputFieldGroup 
          controlId='email'
          validationState={this.emailValidationState}
          controlLabel='email'
          type='text'
          name='email'
          value={this.state.email}
          placeholder='Enter Business Email'
          onChange={this.handleTextChange}
        />
      {/* When I don't use the higher component the onchange works fine */}
        <FormGroup>
          <ControlLabel>Name</ControlLabel>
          <FormControl
            type='text'
            name='name'
            value={this.state.name}
            placeholder='Enter Name'
            onChange={this.handleTextChange}
          />
            <FormControl.Feedback />
        </FormGroup>
      </form>
    )
  }
}

为什么onChange函数没有传递给子输入？

Answer 1

因为它未定义！实际上你给了

onChange={this.handleTextChange}

将组件作为道具，如果你想称之为

props.onChange

而不是

props.handleChange

否则，将变量onChange = {js}更改为handleChange = {js}

我的onChange函数没有传递给child

1 个答案: