如何从父组件调用子组件功能？

Question

我有一个满足以下条件的输入字段组件：

最初关注时，在字段有效之前，什么也不会发生，然后应用有效的类

第一次模糊时，如果字段无效，则应用无效的类。

第一次模糊之后，一旦与该字段进行任何进一步的交互，只要该字段的值从有效变为无效，反之亦然，就会应用一个类。

为此，我做到了：

 import React, { Component } from "react"; class Input extends Component { constructor(props) { super(props); this.state = { touched: false, valid: false, focused: false, value: "" }; this.handleFocus = this.handleFocus.bind(this); this.handleBlur = this.handleBlur.bind(this); this.handleChange = this.handleChange.bind(this); } handleFocus() {} handleBlur() { if (!this.state.touched) { this.setState({ touched: true }); } else if (this.state.touched) { this.setState({ focused: true }); } } handleChange(e) { const val = e.target.value this.setState({ value: val }, () => { this.validateField(); } ); } validateField() { const touched = this.state.touched; const focused = this.state.focused; const valid = this.state.valid; const value = this.state.value; if (value.length >= 5) { this.setState({ valid: true, touched: true }); } else { this.setState({ valid: false }); } } render() { return ( <div> <input id={this.props.id} name={this.props.name} type="text" className={`form-control ${styles["kyi-input"]} ${ this.state.valid ? "is-valid" : "" } ${this.state.touched && !this.state.valid ? "is-invalid" : ""}`} required spellCheck="false" autoComplete="off" onFocus={this.handleFocus} onChange={this.handleChange} value={this.state.value} onBlur={this.handleBlur} placeholder={this.props.placeholder} /> </div> ); } } class Parent extends Component { handleInput(val, name) { // Can get value of input here this.setState({ [name]: val }); } render() { <Input placeholder="Test" onChange={(val) => {this.handleInput(val, 'inputName')}}/> } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

它可以工作，但这意味着字段的状态位于子组件而不是父组件中。

输入字段的onBlur函数依赖于字段的状态。

有没有一种方法可以重构它，使输入状态位于父组件中，而onBlur函数位于子组件中？

Answer 1

我认为您应该在父组件中获得所有状态，还应该在父组件中获得所有修改它的功能。 这将使您拥有一个“单一事实来源”，它可以跟踪状态的变化并将其传递给所有子组件。 查看提升状态