javascript - How to set input value to null in react - Stack Overflow

admin管理员组

文章数量:1315308

Why I can't set target value to null if target value is empty str ?

here is my code, hope you'll help me:

   class Input extends React.Component {
      constructor(props) {
        super(props);
        this.onInputChange = this.onInputChange.bind(this);
      }

      onInputChange(event) {
        const fieldValue = event.target.value;
        if (!fieldValue) {
          event.target.value = null;
        }
        this.props.onChange(event);
      }

      render() {
        return <input value={this.props.value} onChange={this.onInputChange} />;
      }
    }

Why I can't set target value to null if target value is empty str ?

here is my code, hope you'll help me:

   class Input extends React.Component {
      constructor(props) {
        super(props);
        this.onInputChange = this.onInputChange.bind(this);
      }

      onInputChange(event) {
        const fieldValue = event.target.value;
        if (!fieldValue) {
          event.target.value = null;
        }
        this.props.onChange(event);
      }

      render() {
        return <input value={this.props.value} onChange={this.onInputChange} />;
      }
    }

• javascript
• reactjs

Share Improve this question Follow asked Oct 9, 2018 at 23:24 Рома БойкоРома Бойко 8711 gold badge22 silver badges99 bronze badges 2

• 2 What's the point of setting it null? Is there's a reason? Meanwhile, always define what type the input is. For example, type="text or type="number"...etc. – Matt Carlotta Commented Oct 9, 2018 at 23:38
• I don't believe you can set value to null. You can disable the input so it doesn't send a value on submit. – Joe Fitzsimmons Commented Oct 9, 2018 at 23:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

It's an old issue but maybe this answer will help someone. If you're working with Material UI and Formik then this might be helpful:

import TextField from "@material-ui/core/TextField";
import * as React from "react";

export interface TextFieldProps {
  className?: string;
  disabled?: boolean;
  fullWidth?: boolean;
  helperText?: string | JSX.Element;
  multiline?: boolean;
  name: string;
  label: string;
  onChange?(event: React.ChangeEvent<{ value: string | null }>): void;
  required?: boolean;
  rows?: number;
  type?:
    | "text"
    | "color"
    | "date"
    | "email"
    | "password"
    | "number"
    | "tel"
    | "time"
    | "url"
    | "hidden";
  value?: string | null;
}

export const NullableTextField: React.FC<TextFieldProps> = (props) => {
  const { onChange, value, ...restProps } = props;

  const handleChange = React.useCallback<
    (event: React.ChangeEvent<{ name?: string; value: string | null }>) => void
  >((event) => {
    const value = event.target.value;
    if (value === "") {
      event.target = {
        ...event.target,
        name: event.target.name,
        value: null,
      };
    }
    onChange?.(event as React.ChangeEvent<{ value: string | null }>);
  }, []);

  return (
    <TextField
      {...restProps}
      onChange={handleChange}
      value={typeof value === "string" ? value : ""}
      variant="outlined"
    />
  );
};

Btw. it's pretty annoying that you have to do some extra work to make sure that empty values are nulls and it's not default behavior.

You should pass a value to the this.props.onChange(), not the event, and you shouldn't set it to null. Set it to a empty string. So, you should do:

onInputChange(event) {
    var fieldValue = event.target.value; // It should be a var, then you can update it
    if (!fieldValue) {
        fieldValue = "";
    }
    this.props.onChange(fieldValue);
}

本文标签： javascriptHow to set input value to null in reactStack Overflow