Clear input after submit content

[Deleted user]

I still have problems with my code, could anyone help? I tried the last suggested solution but it didn't work.

I´ve tried this solution #180 but didn´t work either.

Here is my code

import useLoggedUser from 'modules/auth/hooks/use-logged-user'
import React, { useEffect, useState } from 'react'
import { MessageList, Input } from "react-chat-elements"
import {
  InputGroup,
  InputGroupAddon,
  Button,
} from 'reactstrap'
import moment from 'moment'

function Chat({ messages, sendMessage }) {
  const [message, setMessage] = useState('')
  const { user } = useLoggedUser()

  const pushMessage = (message) => {
    message = {
      position: "right",
      type: "text",
      title: user.username,
      text: message,
      date: moment().toDate(),
      dateString: moment().format('DD/MM HH:mm'),
    }

    setMessage('')
    sendMessage(message.text);
  };

  return (
    <div>
      <MessageList
        className='message-list'
        lockable={true}
        toBottomHeight={'100%'}
        dataSource={messages}
      />

      <InputGroup className='mt-5'>
        <Input
          className="form-control border-0 p-0"
          placeholder="Mensagem"
          multiline={true}
          autofocus={true}
          value={message}
          maxHeight={100}
          minHeight={46}
          onChange={e => setMessage(e.target.value); }
        />

        <InputGroupAddon addonType="append">
          <Button
            color='primary'
            onClick={() => pushMessage(message)}
          >
            <span className="btn-inner--icon">
              <i className="fa fa-paper-plane" />
            </span>
          </Button>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

export default Chat

[emregudur]

Hi, can you try this;

import { Input, Button } from 'react-chat-elements'

let clearInput = () => {}

export default function MessageSenderComponent() {
  const sendMessage = () => {
    clearInput()
    // some other code
  }

  const onChangeMessageInput = e => {
    console.log(e.target.value)
  }

  return (
    <>
      <Input clear={clear => (clearInput = clear)} onChange={onChangeMessageInput} />
      <Button onClick={sendMessage} />
    </>
  )
}

[bvelasquez]

This example is not working for me @emregudur. Is this still the accepted way of clearing the Input? Seems like you should be able to set a value prop, but I don't see one. Any ideas what I'm doing wrong?

let clearInput = () => {};
...

const sendMessage = () => {
    console.log("message", message);
    clearInput();
    setMessage("");
  };
...

<Input
        placeholder="Type your message here..."
        value={message}
        multiline={true}
        autofocus={true}
        clear={(clear) => (clearInput = clear)}
        onChange={(event) => {
          console.log(event.target.value);
          setMessage(event.target.value);
        }}
        rightButtons={
          <Button onClick={sendMessage} variant="contained">
            Send
          </Button>
        }
      />

[igun997]

it's seems weird why Input not have value props?

[yamanSitech]

Any updates on "Value" prop for Input?

[igun997]

#192

closed by this pull.