來自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>