React onChange 函数在传递给组件时不会触发

Question

已解决请参阅下面的评论（只需将选择器和部分功能移到类组件之外即可使其工作。

所以我对 react onChange 函数有问题。当它作为道具传递给组件时，它似乎不起作用。我试图传递组件而不是数据，但它仍然不起作用。请考虑以下示例：

export default class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: '1',
      number: ''
    }
  }

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

  render() {
    return (
      <div className="App">
          <Form
            type={this.state.type}
            number={this.state.number}
            handleChange={this.handleChange}
          />
      </div>
      }
  }


//receiving the props
export default class Child extends Component {
        constructor(props) {
            super(props)
        }

        render() {
            const Chooser = ({ type, section }) => {
                switch (type) {
                    case '1':
                        return <Fragment>{section}</Fragment>
                    default:
                        return <Fragment>></Fragment>
                }
            }
            const Section = ({ number, handleChange }) => (
                <Fragment>
                    <div>
                        <label>Number</label>
                        <input
                            type='text'
                            name='number'
                            placeholder='123456789'
                            value={number}
                            onChange={handleChange}
                        />
                    </div>
                </Fragment>
            )

            return (
                <Chooser
                    type={this.props.type}
                    section={
                        <Section
                            number={this.props.number}
                            handleChange={this.props.handleChange}
                        />
                    }
                />
            )
        }
    }

有趣的是，如果我将 onChange 放在 Section 级别，它确实有效。但这不是我想要的，因为传递的组件可能有多个我想要传递的 Input 函数。

         return (
                <Chooser
                    type={this.props.type}
                    section={
                        <Section
                            number={this.pops.number}
                            onChange={this.pops.handleChange}
                        />
                    }
                />

知道如何使用道具传递 onChange 函数吗？在类似的示例中，输入更改确实有效，但每次按下值时都会失去焦点。已经尝试分配键，但也没有用。

Answer 1

这是因为你需要像 const {handleChange} = this.props.handleChange 那样在下一次像这样解构它

Answer 2

您目前将此作为您的 handleChange 方法

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

你应该把它改成这个。

handleChange = e => {
  const { name, value } = e.target;
  this.setState({ [name]: value })
}

您似乎访问了target 中的错误属性，因为name 在e.target.value 中始终是undefined，因此，调用setState 不会做任何事情。

此外，您可能应该在类组件之外声明您的函数组件。

Answer 3

您可以将handleChange() 包装在一个匿名函数中，这样它就会主动等待您对输入进行更改。否则它将在渲染时运行。

 const Section = ({ number, handleChange }) => (
                <Fragment>
                    <div>
                        <label>Number</label>
                        <input
                            type='text'
                            name='number'
                            placeholder='123456789'
                            value={number}
                            onChange={(e) => handleChange(e)}
                        />
                    </div>
                </Fragment>
            )