Javascript 设置外部组件的状态

我有以下代码的问题：

我的委托人：

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>
)

const code=（）=>(
this.setState（{tournamentCode:e.target.value}）}/>
进入
)

它们都在同一个

Landing.js

文件中

我知道我的问题是我试图在Landing类之外执行

这个.setState

。 这个问题有什么解决办法吗？还是有更好的方法来编程

---

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

简短回答：不，您不能在组件外部设置状态

详细回答：您不能直接在组件外部修改组件的状态，但您始终可以创建一个更改状态的方法，然后将其作为道具传递给

组件。示例代码（

为简单起见，已删除组件）

import React，{Component}来自“React”；
从“react dom”导入react dom；
类扩展组件{
状态={
登录方法：“”，
锦标赛代码：-1
};
onChange=e=>{
这是我的国家({
锦标赛代码：e.target.value
});
};
render（）{
//您可以使用或
//我把状态打印出来，告诉你它已经更新了
返回(
{this.state.tournamentCode}

);
}
}
常量代码=（{onChange}）=>(
进入
);
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

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

---

Codesandbox供将来参考：

请熟悉reactjs基础文档以及如何使用类组件的状态。考虑一下：你不能在这样的功能组件中使用状态——你需要把它变成一个类，而不是一个聪明的解决方案。

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);