javascript - Reactjs 将变量从另一个类传递给函数

Question

Request.js

export default class Request extends React.Component {
getForm(e) {
  let v = validator(document.getElementById('myinput')); // here is should call function from another class
}
render(){
  return(
      <form onSubmit={this.getForm.bind(this)}>
        <RequestValidator/> // here is I called second class
        <Input id="myinput" value="65"/>
      </form>
    }
  }
}

RequestValidator.js

export default class RequestValidator extends React.Component {
  validator = (e) => { // here is the target function
    console.log(e.value);
  }
}

我想要做的是将变量(#myinput值)从Request组件类传递给函数(validator)另一个组件类 (RequestValidator)。

到目前为止我所做的是上面的代码，但我得到了错误:

'validator' is not defined no-undef

Answer 1

您可以使用ref来做到这一点。您在父组件中创建一个:

class Request extends React.Component {
    constructor(props) {
        super(props)
        this.requestValidatorRef = React.createRef();
    }

然后将其传递给子组件:

<RequestValidator ref={this.requestValidatorRef} />

此时您应该能够像这样调用您的方法:

getForm(e) {
  this.requestValidatorRef.current.validator(e) // ...
}