"下一个 js 状态变化不会改变输入值"

Question

我有这段代码，但是当状态改变时输入字段的值不会改变。当用户点击一行时状态会改变。 当我在文本字段之外打印值时，状态正在发生变化，但这并未反映在输入字段中。 我尝试使用 value 而不是 defaultValue 但它不起作用。

                           <Controller
                            name="name"
                            control={control}
                            defaultValue={selectedRow.name}
                            value={selectedRow.name}
                            rules={{
                              required: true,
                            }}
                            render={({ field }) => (
                              <TextField
                                variant="outlined"
                                fullWidth
                                id="name"
                                label="Name"
                                error={Boolean(errors.name)}
                                helperText={
                                  errors.name ? 'Name is required' : ''
                                }
                                {...field}
                              ></TextField>
                            )}
                          ></Controller>

Answer 1

看起来您使用的是 react-hook-from ( https://react-hook-form.com/ )。

value和onChange应该像这样在TextField内部。

<Controller
  name="name"
  control={control}
  rules={{
    required: true,
  }}
  render={({ field, value, onChange }) => (
    <TextField
      value={value}
      onChange={onChange}
      variant="outlined"
      fullWidth
      id="name"
      label="Name"
      error={Boolean(errors.name)}
      helperText={
        errors.name ? 'Name is required' : ''
      }
      {...field}>
    </TextField>
  )}
/>