Question

我试图将状态传递给组件，以便每当我输入组件的文本字段时都可以更新其状态。但是，这不起作用，我不确定为什么。我在网上找到的大多数示例都是在同一个班级上处理类似的问题。但是，我需要处理组件之间的这种状态。

不仅状态不会改变，而且如果我在文本字段中添加“ value = {information}”部分，也不会让我键入内容。

这是代码示例。

使用组件的类：

class SomeClass extends Component {
  state = {
    information: '',
  };

  handleInfoChange(event) {
    this.setState({
      information: event.target.value,
    });
  }

render(){
  return(
    <div>
      <TesteComponent
       information={this.state.information}
       handleInfoChange={this.handleInfoChange}
      />

组件代码：

const TesteComponent = ({information}, handleInfoChange) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={information} className="bootstrapInput" onChange={() => handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog>

PS：我只发布了给我造成麻烦的部分，因为该组件的整体功能可以解决我遇到的Onchange方法问题。 PS2：我忘了添加要传递给问题中组件的handleInfoChange。现在已经更新了。

Answer 1

TesteComponent无权访问handleInfoChange。您可以将该函数作为这样的属性传递

  <TesteComponent
   information={this.state.information}
   handleInfoChange={this.handleInfoChange}
  />

，然后在TesteComponent中将其更改为

const TesteComponent = (props) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={props.information} className="bootstrapInput" onChange={() => props.handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog>

Answer 2

首先，您没有将handleInfoChange函数作为道具传递给TesteComponent 其次，如果不一起进行销毁，就无法销毁和使用参数。相反，您应该在通过const TesteComponent = ({information, handleInfoChange}) => (作为道具之后写handleInfoChange

const TesteComponent = ({ information , handleInfoChange }) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={information} className="bootstrapInput" onChange={() => handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog>

SomeClass

class SomeClass extends Component {
      state = {
        information: '',
      };

      handleInfoChange(event) {
        this.setState({
          information: event.target.value,
        });
      }

    render(){
      return(
        <div>
          <TesteComponent
           information={this.state.information}
           handleInfoChange={this.handleInfoChange}
          />
      )
   }
}

Answer 3

if(organizer.getPassword().equals(editPass.getText().toString())){
   Toast.makeText(MainActivity.this, "Sign in successfully!", Toast.LENGTH_SHORT).show();

  Intent MainMenu =  new Intent(MainActivity.this, MainMenu.class);
  startActivity(MainMenu);
  // Here use this code to go to another activity class

}

Answer 4

首先，您应该绑定click事件并设置为状态，在这里，我将在控制台中打印更改值...。

这是我的代码，尝试这个。...

class SomeClass extends Component {
  state = {
    information: '',
  };
this.handleInfoChange= this.handleInfoChange.bind(this);

handleSubmit = event => {

    event.preventDefault();
}

  handleInfoChange(event) {
    this.setState({
      information: event.target.value,
      console.log(this.state.information);
    });
  }

render(){
  return(
    <div>
      const TesteComponent = ({information}, handleInfoChange) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <form onSubmit={this.handleSubmit}>
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={information} className="bootstrapInput" onChange={this.handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog></div></form>

来自React组件的OnClick相关功能不起作用

4 个答案: