Question

我在使用react-router插件进行反应时有一个嵌套的路由，并希望将ui与某些功能连接起来

class MyLogin extends React.Component {
constructor(props){
super(props);
this.state={
  email:'',
  password:''
}
}
  login() {
    alert("OK");
  }
}

和用户界面

const Login = ({ match }) => {
    return (
       ...
       <TextField
          hintText="Email eingeben"
          type="email"
          floatingLabelText="Email"
          onChange = {(event,newValue) => 
             MyLogin.setState({email:newValue})}
          />
       ...
       <RaisedButton label="Anmelden" primary={true} /*style={style}*/ onClick={ MyLogin.login }/>
       ...

那么我该如何访问状态变量并将事件处理程序从按钮绑定到我自己的代码？

Answer 1

好吧，如果您要访问组件内部的另一个组件，则可以使用ref。但是refs不应被过度使用。我仅出于教育目的提供此示例（您应该对应用进行重新设计以遵循良好的模式）。

class MyLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  login() {
    alert("OK");
  }
  render() {
    return null;
  }
}

const Login = ({ match, MyLoginRef }) => {
  if (!MyLoginRef) return null;
  return (
    <>
      <input
        type="email"
        onChange={event =>
          MyLoginRef.setState({ email: event.currentTarget.value })
        }
      />
      <button label="Anmelden" onClick={MyLoginRef.login} />
    </>
  );
};

class App extends React.Component {
  state = {}
  refFn = (el) => (this.setState({el}))
  render() {
    console.log(this.el);
    return (
      <div className="App">
        <MyLogin ref={this.refFn}/>
        <Login MyLoginRef={this.state.el} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

codeandbox.io https://codesandbox.io/s/kmv6x4j237

上的实时演示

具有React路由的EventHandler

1 个答案: