使用 React Hooks 单击编辑按钮时禁用输入字段

Question

I don't understand what I'm doing wrong in here. The scenario is that I am on the user profile details and I want to edit the information but one input must be disable at all the time. When I'm loading the page the input it is actually disabled but as soon as I click the edit button it is becoming editable like the rest of the other input. Any suggestion on how to make it works, please?

const [disabled, setDisabled] = useState(false);

const handleClickEditMember = () => {
  Actions.enableMemberEdit();
  setDisabled(!disabled);
};

<Card className={clsx(classes.root, className)}>
  <CardHeader
    action={
      <Button
        color="primary"
        id="edit-member-button"
        onClick={() => handleClickEditMember()}
        size="small"
        variant="contained"
      >
        {t('members.edit')}
      </Button>
    }
    title={member.companyName}
  />
  <Divider />
  <CardContent className={classes.content}>
    <CardHeader title={t('members.company_profile')} />
    <Grid container spacing={3}>
      <Grid item xs={6}>
        <TextField
          className={classes.textField}
          fullWidth
          id="companyName"
          InputProps={{
            readOnly: true,
          }}
          label={t('members.company_name')}
          margin="dense"
          name="companyName"
          placeholder={t('members.company_name')}
          value={member.companyName}
          variant="outlined"
        />
      </Grid>
      <Grid item xs={3}>
        <TextField
          className={classes.textField}
          fullWidth
          id="Id"
          InputProps={{
            readOnly: true,
          }}
          disabled={!disabled}
          label={t('members.id')}
          margin="dense"
          name="Id"
          placeholder={t('members.id')}
          value={member.id}
          variant="outlined"
        />
      </Grid>
    </Grid>

Answer 1

<TextField
    className={classes.textField}
    fullWidth
    id="Id"
    InputProps={{
        readOnly: true,
    }}
    **disabled**
    label={t('members.id')}
    margin="dense"
    name="Id"
    placeholder={t('members.id')}
    value={member.id}
    variant="outlined"
/>

Just disable the textfield. Don't assign any value to disabled property

Answer 2

You're updating the state everytime in the handleClickEditMember() by doing setDisabled(;disabled); which will eventually set to true as its false initially.

So you'll have to

• Remove that piece of code and the state update won't be triggered again!
• And For the ID input field just use disabled={disabled}

Answer 3

Just resolved by doing this:

InputProps={{
  readOnly: memberId ? true : false,
}}