Question

我无法使用以下代码：

我的元件：

class Landing extends Component {

  state = {
    loginMethod: '',
    tournamentCode: -1,
  }
}

我的助手：

const Code = () => (
  <div className="" style={{marginTop: 20}}>
     <input
      className=""
      style={{lineHeight: 1, height: 30, border:0, paddingLeft: 5}}
      placeholder="Tournament Code"
      onChange={e => this.setState({tournamentCode: e.target.value})} />
    <Link to="/App">
      <button className="" style={{marginLeft: 10, border: 0, outline:        
          'none', background: '#efefef', height: 30, width: 80}}> Enter </button>
    </Link>
  </div>
)

两者都在同一个Landing.js文件中。

我知道我的问题是我尝试在Landing课外做this.setState。这个问题有解决方案吗？还是我有更好的编程方法？

我还阅读了关于redux和react中上下文的一些内容。以下哪项是我最好的选择？还是有更简单的解决方案？

Answer 1

简短答案：否，您不能setState在组件外部。

长答案：您不能直接在其外部修改组件的状态，但是始终可以创建一种更改状态的方法，然后将其作为道具传递给<Code />组件。示例代码（为简化起见，删除了<Link />组件）

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Landing extends Component {
  state = {
    loginMethod: "",
    tournamentCode: -1
  };

  onChange = e => {
    this.setState({
      tournamentCode: e.target.value
    });
  };

  render() {
    //You can use <></> or <React.Fragment></React.Fragment>
    //I printed out the state to show you that it has been updated
    return (
      <>
        <div>{this.state.tournamentCode}</div>
        <Code onChange={this.onChange} />
      </>
    );
  }
}

const Code = ({ onChange }) => (
  <div style={{ marginTop: 20 }}>
    <input
      style={{ lineHeight: 1, height: 30, border: 0, paddingLeft: 5 }}
      placeholder="Tournament Code"
      onChange={onChange}
    />
    <button
      style={{
        marginLeft: 10,
        border: 0,
        outline: "none",
        background: "#efefef",
        height: 30,
        width: 80
      }}
    >
      Enter
    </button>
  </div>
);

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

重要：不需要Redux或上下文。学习基础知识，尝试思考最简单的问题解决方案，然后进一步扩展。并非在这种情况下，但这是您应该采用的一种很好的学习方法

Codesandbox供以后参考：https://codesandbox.io/s/n1zj5xm24

setState在组件外部

1 个答案: