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

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>

某类

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

class SomeClass extends Component {
    state = {
        information: ''
    };
    // changed to arrow function to bind 'this'
    handleInfoChange = event => {
        this.setState({information: event.target.value});
    }
    render() {
        return(
            <div>
                <TesteComponent
                    information={this.state.information}
                    // pass handleInfoChange as a prop
                    handleInfoChange={this.handleInfoChange}
                />
            </div>
        );
    }
}

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

Answer 4

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

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

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>