在 ReactJS 中 TextField 值等於“未定義”

Question

我對 ReactJs 和 Material-UI 很陌生。 因此，如果我的問題很愚蠢，我深表歉意。

所以，我有一個包含以下代碼行的文件Main.js ：

  handleChange = (name, event) => {
    if(event==null)
      return;
    console.log(event)
    this.setState({
      [name]: event.value
    }, () => {
      console.log("my_num_var",this.state.my_num_var)
      console.log("my_combobox_var",this.state.my_combobox_var)
    });
  };

然后，我有帶有以下代碼的TopControls.js ：

          <Grid item xs={true}>
            <TextField
                name="my_num_var"
                id="my_num_var"
                label="my_num_var"
                onChange={(event) => this.props.handleChange("my_num_var", event)}
                value={this.props.state.my_num_var}
                type="number"
                className={this.props.styles.textField}
                margin="normal"
                InputProps={{
                    startAdornment: <InputAdornment position="start">(seconds)</InputAdornment>,
                }}
            />
          </Grid>

每次更改my_num_var (TextField) 的值時，我都會在控制台中看到undefined ( console.log("my_num_var",this.state.my_num_var) )。

在handleChange函數中， console.log(event)輸出：

SyntheticEvent {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: InputEvent, type: "change", target: input#visibility.MuiInputBase-input-269.MuiInput-input-254.MuiInputBase-inputType-272.MuiInput-inpu… , ...}

所以，基本上event.value什么都不返回。 僅當我執行event.target.value時才設置該值。 但在這種情況下，組合框不起作用，因為它們需要event.value 。 我如何區分事件？

組合框與event.value配合event.value ，我可以在控制台中看到my_combobox_var正確值。

          <Grid item xs={true}>
            <FormControl
                className={this.props.styles.formControl}
                margin="normal">
                <InputLabel shrink htmlFor="my_combobox_var-label-placeholder">
                    my_combobox_var
                </InputLabel>
                <Select
                    onChange={(event) => this.props.handleChange("my_combobox_var", event)}
                    className="basic-single"
                    classNamePrefix="select"
                    defaultValue={this.props.state.my_combobox_var}
                    isClearable={this.state.isClearable}
                    isSearchable={this.state.isSearchable}
                    name="my_combobox_var"
                    options={this.t}
                    styles={myStyle}/>
            </FormControl>
          </Grid>

我不確定我上面發布的代碼是否足以提供幫助。 如果我應該添加更多詳細信息，請告訴我。 我將不勝感激任何線索。 謝謝。

Answer 1

您可以只傳遞值以使其更簡單，而不是將整個事件傳遞給handleChange 。

由於文本輸入需要event.target.value而不是event.value這將允許您對多種事件類型使用相同的處理程序。

onChange={(event) => this.props.handleChange("my_num_var", event.target.value)

onChange={(event) => this.props.handleChange("my_num_var", event.value)

然后只需重寫您的處理程序以期望值而不是事件：

handleChange = (name, value) => {
  if(value==null)
    return;
  this.setState({
    [name]: value
  },
...