React как собрать данные с формы и отрендерить по запросу

Question

Нужна помощь. Не могу понять как получить данные с checkbox и потом по запросу пользователя отфильтровать. И вывести услуги. Подскажите пожалуйста в каком направлении двигаться? Данные для карточек получаю с json использую map и вывожу. Подскажите как собрать данные с формы. Буду очень благодарен. Подскажите путь. Может у кого пример есть я разберусь

Answer 1

В React есть несколько способов "собирать" данные с формы.

1 использовать состояния https://ru.reactjs.org/docs/state-and-lifecycle.html

2 использовать ссылки https://learn-reactjs.ru/core/refs-and-the-dom

Ничего нового придумывать не нужно, да это и не имеет смысла.

const items = ["100","200","300","400","500"]
class SomeApp extends React.Component {
  constructor(props) {
    super(props)
    this.formref = React.createRef();
    this.onClickSubmit = this.onClickSubmit.bind(this);
}
  onClickSubmit(ev){
    ev.preventDefault();
    for(let key of this.formref.current.elements){
      alert(key.checked+key.name)
    }    
    
  }
  render() {
    return (
            <form ref={this.formref} onSubmit={this.onClickSubmit}>
              {items.map((value, key)=>{
        return(
        <div><input type="checkbox" name={"ch"+key}/>{value}</div>
        )
        })}
        <input type="submit" name="submit"/>
            </form>
    )
  }
}

ReactDOM.render(<SomeApp />, document.querySelector("#app"))

Вот так можно сделать через ref, если не использовать state, который использовать в вашем случае не имеет смысла, потому что вы ждете нажатия кнопки.

БЛОГ НА HUSL

React как собрать данные с формы и отрендерить по запросу

Ответы (1 шт):