Как очистить форму после выполнения?

Question

[trufinol]

Есть компонент:

//Add.jsx
export default React.createClass({

   handleFilmAdd() {

		var title = ReactDOM.findDOMNode(this.refs.addTitle).value,
				year = ReactDOM.findDOMNode(this.refs.addYear).value,
				format = ReactDOM.findDOMNode(this.refs.addFormat).value,
				actors = ReactDOM.findDOMNode(this.refs.addActors).value;

		 var item = {
      "id": Date.now(),
			"Title": title,
			"ReleaseYear": year,
			"Format": format,
			"Stars": actors
  };
    console.log(item)
    this.props.onFilmAdd(item)
  },

  render() {
    return (
    	<div>
       <input
        defaultValue=''
        placeholder='Title'
        ref='addTitle'
      />
      	<input
        defaultValue=''
        placeholder='Release Year'
        ref='addYear'
      />
        <input
        defaultValue=''
        placeholder='Format'
        ref='addFormat'
      />
      <textarea
      defaultValue=''
      placeholder='Actors'
      ref='addActors' ></textarea>
      <button onClick={this.handleFilmAdd}>Add</button>
      </div>
    );
  }
});

Соответствующий метод и рендер родительского компонента

//App.jsx
handleFilmAdd(newFilm) {
		var newFilms = this.state.displayedFilms.slice();
		newFilms.unshift(newFilm);
		this.setState({ displayedFilms: newFilms})
	},

	render() {

		return (
			<Add onFilmAdd={this.handleFilmAdd}/>
)}

Вопрос: Как очистить форму после ввода? Так же есть ли более адекватный способ генерировать ID, кроме как Date.now()?

Answer 1

[fayster]

Сохраняйте изменение элементов формы в состоянии дочернего компонента, а потом просто отправляйте состояние и после очищайте его:

function getDefaultState() {
	return {
		title: '',
		year: '',
		format: '',
		actors: ''
	};
}

export default React.createClass({
	handleFilmAdd() {
    this.props.onFilmAdd({
			id: 'some_id',
			...this.state
		});

		this.setState(getDefaultState());
  },

	handleChange(field, value) {
		this.setState({
			[field]: value
		});
	}

  render() {
    return (
    	<div>
       <input
        value={this.state.title}
				onChange={this.handleChange.bind(this, 'title')}
        placeholder='Title'
        ref='addTitle'
      />
      	<input
        value={this.state.year}
				onChange={this.handleChange.bind(this, 'year')}
        placeholder='Release Year'
        ref='addYear'
      />
        <input
        value={this.state.format}
				onChange={this.handleChange.bind(this, 'format')}
        placeholder='Format'
        ref='addFormat'
      />
      <textarea
	      value={this.state.actors}
				onChange={this.handleChange.bind(this, 'actors')}
	      placeholder='Actors'
	      ref='addActors'>
      </textarea>
      <button onClick={this.handleFilmAdd}>Add</button>
      </div>
    );
  }
});

Comments

[trufinol]

Спасибо. А есть ли вариант с использованием неконтролируемых компонентов?

[fayster]

trufinol: т.е. без привязки к состоянию?

[trufinol]

fayster: да. допустим, просто установить значение пустой строки в найденный элемент ДОМа.

[fayster]

trufinol: можно, в таком случае работать надо как с нативным js, только перед этим достать элемент из разметки:

// Получаем элемент и устанавливаем значение
React.findDOMNode(this.refs.input).value = 'some_value';

// Получаем всю разметку компонента
React.findDOMNode()';

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

// 1 вариант
this.refs.addTitle.value = '',
this.refs.addYear.value = '',
this.refs.addFormat.value = '',
this.refs.addActors.value = '';

// 2 вариант
Object.keys(this.refs).forEach(ref => {
ref.value = '';
})

Надеюсь я ответил на ваш вопрос

[trufinol]

fayster: исчерпывающий ответ, спасибо!

Answer 2

[Максим]

Для генерации id использую библиотечку node-uuid
Например:

import { v4 } from 'node-uuid'
...
const myId = v4()
...

Answer 3

[Александр Серый]

После Date.now() следующий в очереди :

uuid: function () {
			var i, random;
			var uuid = '';

			for (i = 0; i < 32; i++) {
				random = Math.random() * 16 | 0;
				if (i === 8 || i === 12 || i === 16 || i === 20) {
					uuid += '-';
				}
				uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
					.toString(16);
			}

			return uuid;
		},

Взято с todomvc.com