Cleaning value into textarea

wtsuport 0
Viewed 15

I'm using Breeze - Laravel + React in default configuration. I have a problem with cleaning data from textarea after form submit.I know that maybe you don't remmember how Breeze's code look like so I show you below:

export default function SendMessage(props) {
    const { data, setData, post, processing, errors } = useForm({
        message: '',
    });
    const onHandleChange = (event) => {
        setData(event.target.name, event.target.type === 'radio' ? data.permission = event.target.value : event.target.value);
    }
    const submit = (e) => {
        e.preventDefault();
        axios.post('/my-route', {
            message: data.message,
        }).then(() => {
            data.message = '';
        });
    };

    return(
        <>
            <ValidationErrors errors={errors} />

            <form onSubmit={submit} mwthod="post">
                <div className="mt-4">
                    <Label forInput="message" value="message" />

                    <Textarea
                        name="message"
                        value={data.message}
                        className="mt-1 block w-full"
                        autoComplete="message"
                        handleChange={onHandleChange}
                        required
                    />
                </div>
                <div className="flex items-center justify-end mt-4">
                    <Button className="ml-4" processing={processing}>
                        Send
                    </Button>
                </div>
            </form>
            </>
    );

And Textarea look like this:

export default function Textarea({
    name,
    value,
    className,
    autoComplete,
    required,
    isFocused,
    handleChange,
}) {
    const input = useRef();

    useEffect(() => {
        if (isFocused) {
            input.current.focus();
        }
    });

    return (
        <div className="flex flex-col items-start">
            Value is {value}
            <textarea
                name={name}
                className={
                    `border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm ` +
                    className
                }
                ref={input}
                autoComplete={autoComplete}
                required={required}
                onChange={(e) => handleChange(e)}
            >
            {value}
            </textarea>
        </div>
    );
}

As you can see I added Value is {value}. What is different, after I submit the form props value is cleaning what can I saw in this line. Problem is that it is further seen in textarea (props value doesn't disappear) and I don't have idea why. Could you help me?

react-component react-props frontend reactjs
1 Answers

see example here

you can try using useImperativeHandle hook and get the textarea element and after promise resolved you can empty the value of the textarea textarea.value = "

i really don't know if its gonna work or not , but you can try to modify your code to this, but above example works well

export default function SendMessage(props) {
  const { data, setData, post, processing, errors } = useForm({
    message: ""
  });
  const textAreaRef = useRef();
  const onHandleChange = (event) => {
    setData(
      event.target.name,
      event.target.type === "radio"
        ? (data.permission = event.target.value)
        : event.target.value
    );
  };
  const submit = (e) => {
    e.preventDefault();
    axios
      .post("/my-route", {
        message: data.message
      })
      .then(() => {
        data.message = "";
        textAreaRef.current.getInput().value = " ";
      });
  };

  return (
    <>
      <ValidationErrors errors={errors} />

      <form onSubmit={submit} mwthod="post">
        <div className="mt-4">
          <label forInput="message" value="message" />

          <Textarea
            name="message"
            value={data.message}
            className="mt-1 block w-full"
            autoComplete="message"
            handleChange={onHandleChange}
            required
            ref={textAreaRef}
          />
        </div>
        <div className="flex items-center justify-end mt-4">
          <button className="ml-4" processing={processing}>
            Send
          </button>
        </div>
      </form>
    </>
  );
}

Textarea component

function Textarea({
  name,
  value,
  className,
  autoComplete,
  required,
  isFocused,
  handleChange,
}) {
  const input = useRef();

  useEffect(() => {
      if (isFocused) {
          input.current.focus();
      }
  });

  useImperativeHandle(ref,()=>({
    getTextareaElem : ()=>input.current
  }))

  return (
      <div className="flex flex-col items-start">
          Value is {value}
          <textarea
              name={name}
              className={
                  `border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm ` +
                  className
              }
              ref={input}
              autoComplete={autoComplete}
              required={required}
              onChange={(e) => handleChange(e)}
          >
          {value}
          </textarea>
      </div>
  );
}

export default React.forwardRef(Textarea);
userVdWh10
Related