TextField type="number"에 최소/최대값을 설정하시겠습니까?

TextField type="number"에 최소/최대값을 설정하시겠습니까?

Material-UI v1.0.0-beta23을 사용하고 redux-form ★★★★★★★★★★★★★★★★★」redux-form-material-uiField이것은 타입 번호이며 태그의 최소값과 최대값을 설정합니다. 다inputProps'최소/최대'를 선택합니다.소스코드를 봤는데 확실한 방법이 없네요.약약면면면면면면면면면면?

여기 JSX가 제가 시도했던 것들을 보여줍니다.

<Field
  name="maxNodeSelectedCount"
  component={TextField}
  label="Max Node Selected Count"
  type="number"
  inputProps={{ min: 0, max: 10 }}
  min={11}
  max={20}
  format={formatOption}
  normalize={normalizeOption}
  {...propertyFieldDefaults}
/>

DOM 의 외관은 다음과 같습니다.

<input type="number" class="MuiInput-input-346 MuiInput-inputSingleline-349 MuiInput-inputDense-347" value="-3" name="options.maxNodeSelectedCount">

레독스 양식 필드는 다음 컴포넌트에 소품을 전달합니다.

다른 모든 소품은 컴포넌트 소품에서 생성된 요소로 전달됩니다.

TextField에는 다음과 같은 속성이 있습니다.InputProps렌더링하는 입력 컴포넌트에 소품을 전달하는 데 사용할 수 있습니다.이것은, 다음의 기능을 사용하고 있는 경우에도 마찬가지입니다.redux-form-material-uiTextField의 material-ui의 mui 。

의 의Input에는 성질이 있습니다.inputProps때쓸 수 요.input더더렌렌

좋아요, 그럼 어떻게 하죠?

까지 .Field , 에, 에, 에.TextField , 에, 에, 에.Input에 합니다.input★★★★★★ 。

so so so so so so InputProps는 TextField로 됩니다.Input요소.만약 우리가 통과하는 물체에 내부가 포함되어 있다면inputProps소문자 '이 컴포넌트를 ('i'), 에 합니다.input★★★★★★ 。

핫프로토 게임:

'이행'을 정의합니다.inputProps에 있는 것InputProps을 리고그 it it it it it it andField

<Field
    name="maxNodeSelectedCount"
    component={TextField}
    label="Max Node Selected Count"
    type="number"
    InputProps={{ inputProps: { min: 0, max: 10 } }}
    format={formatOption}
    normalize={normalizeOption}
    {...propertyFieldDefaults}
  />

• 에서는 Input 를 Input Propes를 Input Propes로 합니다.TextField
• 을 TextField의 InputProps에 합니다.Input 표시
• 을 inputProps에 했습니다.input에 의존하다

여기에는 주의사항이 있습니다.

TextField의 현재 구현은 다음과 같은 자체 값을 설정합니다.inputProps그 때문에inputClassName 말은 이에요.input★★★★★★ 。

하면 TextField가 TextField는 그대로 .inputClassName 해제. 를 하고 있는 . 를 사용하고 있는 경우inputClassName요.inputProps★★★★★★ 。

편집: 향후 릴리즈에서 이 경고에 대처하기 위해 문제 및 풀 요청을 제출했습니다.

단순히 입력 프로펠을 잘 활용하세요.

<TextField 
    type="number"
    InputProps={{
        inputProps: { 
            max: 100, min: 10 
        }
    }}
    label="what ever"
/>

입력 프로포트에서 대문자와 소문자를 확인한다.

켄 그레고리의 공로

하시면 됩니다.inputProps에게 input 「」, 「」등)min ★★★★★★★★★★★★★★★★★」max.

<TextField type="number" inputProps={{ min: 4, max: 10 }} />

★★★★★★★★★에 주의해 주세요.min/maxAtribute는 사용자가 잘못된 값을 입력하는 것을 막지 않습니다.TextField사용자가 입력할 수 있는 것을 제한하려면 다음 값을 추가하여 값을 검증할 수 있습니다.onChange다음과 같은 핸들러:

const min = 0;
const max = 10;

export default function BasicTextFields() {
  const [value, setValue] = useState<number>();

  return (
    <div>
      <TextField
        type="number"
        inputProps={{ min, max }}
        value={value}
        onChange={(e) => {
          var value = parseInt(e.target.value, 10);

          if (value > max) value = max;
          if (value < min) value = min;

          setValue(value);
        }}
      />
    </div>
  );
}

놓다type안에서.InputProps:

      <Field
        name="number"
        label="Number"
        component={TextField}
        InputProps={{
          inputProps: {
            type: 'number',
            min: 0, max: 25,
          },
        }}
      />

다른 답은 통하지 않았다.

머티리얼 UI에는 서드파티 통합 섹션이 있습니다.

숫자만 쓰고 음수는 허용하지 않는 그런 역할을 합니다.

import NumberFormat from 'react-number-format';

function NumberFormatCustom(props) {
    const { inputRef, onChange, ...other } = props;
    
     return (
            <NumberFormat
                {...other}
                getInputRef={inputRef}
                allowNegative={false}
                onValueChange={(values) => {
                    onChange({
                        target: {
                            name: props.name,
                            value: values.value,
                        },
                    });
                }}
                isNumericString
            />
        );
}
    
<TextField
    label="react-number-format"
    value={values.numberformat}
    onChange={handleChange}
    name="numberformat"
    id="formatted-numberformat-input"
    InputProps={{
          inputComponent: NumberFormatCustom,
     }}
/>

이거면 될 거야

handleMobileNumber = (e) => {
 if (e.target.value.split("").length <= 10) {
  this.setState({
    mobileNumber: e.target.value,
  });
 }
};

<TextField
  label="Enter Mobile Number"
   variant="outlined"
   value={this.state.mobileNumber}
   onChange={this.handleMobileNumber}
   type="number"
/>

저도 같은 문제가 있었습니다.저 같은 경우 사용자가 MUI 텍스트필드에 큰 숫자나 작은 숫자를 추가하지 않도록 하고 싶었습니다.minutes또는hours입력.

저의 솔루션은 다음과 같습니다.
MUI 텍스트 필드

  <TextField                                                            
    type={'number'}
    helperText={'minutes'}
    defaultValue={minutes}
    onChange={(e) => { checkMinutesValidity(e) }}
  />

check Minutes Validity 함수에서

  const checkMinutesValidity = (event) => {
    if(event.target.value > 59){
      event.target.value = 59;
    }
    if(event.target.value < 0){
      event.target.value = 0;
    }
}

도움이 됐으면 좋겠다.

rect 훅 형식을 사용하는 경우 다음과 같이 검증할 수 있습니다.

import {Controller } from 'react-hook-form'
import {
  Box,
  TextField,
  FormHelperText,
  FormControl,

} from '@mui/material'
...
const {
  handleSubmit,
  control,
  formState: { errors },
} = useForm({})
...
<Box mt={2}>
  <Controller
    name="weight"
    control={control}
    rules={{
      required: 'Veuillez choisir une réponse',
      validate: {
        weight: (value) =>
          value < 1 || value > 5
            ? 'Le poids doit etre entre 1 et 5'
            : undefined,
      },
    }}
    render={({ field: { onChange, value } }) => (
      <FormControl fullWidth>
        <TextField
          type="number"
          value={value}
          onChange={onChange}
          label="Poids"
          name="weight"
        />
      </FormControl>
    )}
  />
  <FormHelperText error={Boolean(errors.weight)}>
    {errors.weight?.message}
  </FormHelperText>
</Box>

<TextField
            label="Username"
            id="outlined-start-adornment"
            variant="outlined"
            inputProps={{minlength:5, maxLength: 20}}
          />

언급URL : https://stackoverflow.com/questions/47798104/set-min-max-on-textfield-type-number