Question

解决了以下注释（只需将Chooser和Section函数移至类组件之外即可使用。

所以我对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}
                        />
                    }
                />

有什么想法可以使用props向下传递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将始终位于undefined中的e.target.value内，因此，调用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>
            )

向下传递到组件

3 个答案: