javascript - ReactJS:状态更改时元素不会更新

Question

我有一个像这样设置的 React 组件:

export default class FormDialog extends React.Component {
  constructor(){
    super();
    this.state = {allowedToDelete: false};
  }
  onChange(event) {

    if (event.target.value.match(this.targetName)) {
      console.log("It's a match!");
      this.state = {allowedToDelete: true};
      console.log(this.state); 
    } else {
      this.state = {allowedToDelete: false};
    }
  }

  render() {
    const { profile, deleteUser, handleDialogClose, ...other } = this.props;
    this.targetName = `${profile.firstName} ${profile.lastName}`;
    console.log({...other})

    return (
      <Dialog {...other}>
        <DialogTitle id="form-dialog-title">Delete this user?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            allowedToDelete: {String(this.state.allowedToDelete)}
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="User's Full Name"
            type="text"
            fullWidth
            onChange={this.onChange.bind(this)}
          />
        </DialogContent>
        <DialogActions>
          <Button variant="outlined" onClick={this.handleDialogClose} color="primary">
            Cancel
          </Button>
          <Button variant="outlined" onClick={this.deleteUser} disabled={!this.state.allowedToDelete} color="primary">
            Delete User! 
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
}

(我在这里使用material-ui的表单对话框组件)。

如上所述，系统会提示用户输入他们想要删除的配置文件的全名；如果它们与名称匹配，则“删除用户!”按钮应该变为取消禁用状态。

我的 onChange() 事件正在运行，当我输入正确的名称时，我会在控制台中看到 It's a match! 以及 this 的日志.state 显示 this.state.allowedToDelete === true。

但是，我的渲染函数的 allowedToDelete: {String(this.state.allowedToDelete)} 以及我的按钮的 disabled={!this.state.allowedToDelete} 都保持假。

我在这里做错了什么？我是 React 新手，对状态的理解可能会感到困惑，但我尝试使用直接附加到 this 而不是状态的变量来执行此操作，但这也不起作用......

Answer 1

您需要调用setState。您可以阅读in the react docs 。这就是告诉 React 组件触发生命周期以显示新状态的原因。

this.setState({allowedToDelete: false});