小编Mai*_*rez的帖子

我正在使用 Material-UI 库来制作表单。但我不知道如何区分我的文本字段处于只读或编辑模式时。看起来一样。我希望用户注意到他何时以这种或另一种方式。提前致谢。

          <TextField
            inputProps={{
              readOnly: Boolean(readOnly),
              disabled: Boolean(readOnly),
            }}
            required
            fullWidth
            name="first_name"
            type="text"
            label="First Name"
            value={first_name || ''}
            onChange={this.handleChange}
          />

我想创建一个 TextField 元素来处理数字字段。我想动态处理这个组件，这样它不仅可以帮助我管理信用卡格式、电话等。我使用 react-number-format 库的方式与 Material-UI 示例相同。我试图通过道具“前缀”和“格式”发送而没有有利的结果。我想知道我应该如何发送这些属性，如果我有办法的话。提前致谢 ！

function NumberFormatCustom(props) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value
          }
        });
      }}     
      thousandSeparator={","}
      decimalSeparator={"."}
      isNumericString
      prefix={props.prefix} //"$"      
    />
  );
}

NumberFormatCustom.propTypes = {
  inputRef: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired
};

class NumberTextField extends Component {
  state = {
    numberformat: this.props.value
  };

  handleChange = event => {
    const targetField = this.props.name;
    const targetValue = event.target.value;
    this.setState({
      ...this.state,
      numberformat: targetValue
    }); …