Question

在我的父容器中，我有一个验证用户输入的输入的函数。

父渲染具有子组件。

cards

根本没有调用validate函数。任何人都可以提出错误的建议吗？

Answer 1

您正在将名为onChange的道具名称从父级传递给子级。所以在你的子组件中，prop可以作为this.props.onChange访问。您需要拨打this.props.onChange而不是this.props.update，如下所示

<input
     value={this.props.inputValue}                    
     onChange={this.props.onChange}
/>

以下是您可以查看的工作样本

<!DOCTYPE html>
<html>
  <head>
    <title>React Hello World</title>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/jsx">
      class Parent extends React.Component {
          update() {
            console.log("I am changed");
          }

          render() {
              return (
                <div>
                    Hello World!
                    <Child onChange={this.update} />
                </div>
              )
          }
      }

      class Child extends React.Component {
        render() {
          return (<input type="text" name="test" defaultValue="" onChange={this.props.onChange}/>);
        }
      }

      ReactDOM.render(
        <Parent />, 
        document.getElementById("app")
      );
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Answer 2

问题是你在子组件中的道具名称不匹配，请尝试使用此

validate(input) {       
    let value = input.target.value; //parent validate fun
    }
render()
 { 
    return (
        <div>
            <InputCom
                value={this.props.inputValue}                    
                validateHandler={this.validate}
            />
        </div>
  }

      //Child render
           <input
                value={this.props.inputValue}                    
                onChange={this.props.validateHandler('your param')}
            />
        </div>

无法在子组件reactjs中调用父方法

2 个答案: