javascript - Material-UI TextField - 将 onChange 应用于特定 TextField

Question

我创建了一个函数，可以“映射”对象数组并使用该信息创建material-ui TextField 元素。当用户输入的字符超过 maxLength 时，我尝试输出错误消息。我想仅显示用户当前通过“onChange”使用的 TextField 的错误消息。但是，它被应用于页面上的所有文本字段。您能帮我解决这个问题吗？

以下是我的两个功能:

这是 displayCustomFields 函数，它“映射”对象数组并将该信息使用到 TextField 元素。

displayCustomFields() {
    const { meteredConsumptionForm } = this.props.meteredConsumptionForm;
  
    if(Object.keys(meteredConsumptionForm).length > 0 ) {
      const customFields = meteredConsumptionForm.customfields;

      let customFieldPlaceholder = '';

      return (
        Object.keys(customFields).map((key, index) => {
          const customFieldItem = customFields[key];
          return (
            <div className="dd-form-text-field" key={index}>
             <TextField
                name="formTextField"
                className="metered-form-textfield"
                // id="first-textfield"
                id="metered-form-textfield-desc"
                // maxLength={10}
                margin="dense"
                fullWidth
                placeholder={customFieldPlaceholder}
                label={customFieldItem.label}
                onChange={this.handleTextChange.bind(this)}
                required={true}
                InputLabelProps={{
                  shrink: true
                }}
                inputProps={{
                  maxLength: 10,
                }}

                // error={false}
                error={this.state.textFieldError}
                helperText={this.state.textFieldErrorMsg}
             />
            </div>
          );
        })
      );
    }
  }

这是我的 TextField 的 handleChange 函数:

handleTextChange = () => {
    const el = document.getElementById('metered-form-textfield-desc');
    
    this.setState({
      textFieldValueLength: el.value.length
    });
    
    if(this.state.textFieldValueLength === el.maxLength-1) {
      console.log('Exceeded number of characters');
      this.setState({
        textFieldError: true,
        textFieldErrorMsg: 'Exceeded maximum number of characters'
      });
    } else if(this.state.textFieldValueLength !== el.maxLength) {
      this.setState({
        textFieldError: false,
        textFieldErrorMsg: ''
      });
    }
  }

Answer 1

您只检查一个 id，即“metered-form-textfield-desc”，因此所有文本字段都具有相同的 id

const el = document.getElementById('metered-form-textfield-desc');

你可以尝试这个，只需添加索引键的值(我假设这将使所有文本字段唯一)。感谢@Ted 更正 id 的值。

 id={"metered-form-textfield-desc "+index} 

并通过将索引传递给handleTextChange(index)方法并将其附加到

来执行相同的操作

const el = document.getElementById('metered-form-textfield-desc '+index);