Блог

У меня есть этот компонент

 import * as React from 'react';

const taskAdd = (props: { handleAdd: any }) => {
    return (
        <form className="form-inline" onSubmit={props.handleAdd}>
            <table className="table">
                <tbody>
                    <tr>
                        <td>
                            <input type="text" className="form-control" name="name" placeholder="Name"></input>
                        </td>
                        <td>
                            <input type="text" className="form-control" name="priority" placeholder="Priority"></input>
                        </td>
                        <td>
                            <button className="btn btn-primary" type="submit">Add</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    );
}

export default taskAdd;
 

это работает нормально, но проблема в том, что когда я добавляю новую задачу в свой список задач, я также хотел бы очистить поля ввода. Как это сделать? Я попытался использовать state свойства и сбросить их в handleAdd событии, но это не возымело никакого эффекта.

Есть идеи?

Рабочий код, основанный на ответе Faroot Sedat

 import * as React from 'react';

const TaskAdd = (props: { handleAdd: any }) => {

    const [name, setName] = React.useState("");
    const [priority, setPriority] = React.useState("");

    const onSubmit = (e: any) => {
        // reset fields
        setName("");
        setPriority("");

        // redirect event
        props.handleAdd(e);
    };

    const handleChangeName = (e: any) => {
        setName(e.target.value)
    }

    const handleChangePriority = (e: any) => {
        setPriority(e.target.value)
    }

    return (
        <form className="form-inline" onSubmit={onSubmit}>
            <table className="table" style={{ marginBottom: "0px" }}>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" className="form-control" name="name" placeholder="Name"
                                value={name}
                                onChange={handleChangeName}></input>
                        </td>
                        <td>
                            <input type="text" className="form-control" name="priority" placeholder="Priority"
                                value={priority}
                                onChange={handleChangePriority}></input>
                        </td>
                        <td>
                            <button className="btn btn-primary" type="submit">Add</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    );
}

export default TaskAdd;
 

вы должны установить значение по умолчанию для своих входных данных, как показано ниже:

 class App extends Component {
   state={
     name: '',
     priority: '',
   }

   handleAdd = event => {
     ...
     ...
     this.setState({...state, name: '', priority: '')
   }

}
 

 <td>
   <input type="text" className="form-control" value={props.name} name="name" placeholder="Name"></input>
</td>
<td>
   <input type="text" className="form-control" value={props.priority} name="priority" placeholder="Priority"></input>
</td>
 

или вы можете сбросить ввод с помощью JavaScript, как показано ниже:

 document.getElementsByName('name').value = '';
document.getElementsByName('priority').value = '';

 

Вам нужно установить свойство value для ввода со свойствами состояния, добавить их обработчик onChange и сбросить эти свойства состояния в форме onSubmit.

Это не полный код, но вы можете сделать что-то вроде

 import * as React from "react";

const taskAdd = (props: { handleAdd: any }) => {
  const [name, setName] = useState("");
  const [priority, setPriority] = useState("");
  const onSubmit = () => {
    setName("");
    setPriority("");
    props.handleAdd(//some-data);
  };
  return (
    <form className="form-inline" onSubmit={props.onSubmit}>
      <table className="table">
        <tbody>
          <tr>
            <td>
              <input
                type="text"
                className="form-control"
                name="name"
                placeholder="Name"
                value={name}
                onChange={(value) => setName(value)}
              />
            </td>
            <td>
              <input
                type="text"
                className="form-control"
                name="priority"
                placeholder="Priority"
                value={priority}
                onChange={(value) => setPriority(value)}
              />
            </td>
            <td>
              <button className="btn btn-primary" type="submit">
                Add
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  );
};

export default taskAdd;