Сохранение JS State в неупорядоченный список - PullRequest
Новая
       6

Сохранение JS State в неупорядоченный список

0 голосов
/ 11 января 2020 


class App extends Component {
  constructor() {
    super()
    this.state = {
      firstName: ""
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    this.setState({
      firstName: event.target.value
    })
  }

  render() {
    return (
      <form>
        <input type="text" placeholder="First Name" onChange={this.handleChange} />
        <h1>{this.state.firstName}</h1>
      </form>
    );
    }
}

export default App;

Привет всем, в настоящее время я изучаю React и, кажется, с трудом понимаю все это. Работающий здесь код работает так, что в браузере будет показано, что пользователь печатает в поле ввода. То, что я не могу понять или приступить к работе, это отображение того, что набрано на вводе, чтобы остаться на экране. Т.е. когда я нажимаю ввод, он обновляется и имя уходит. Я пытаюсь создать неупорядоченный список, чтобы каждое имя отображалось на экране. Любая помощь или ссылки будут с благодарностью. Спасибо

1 Ответ

1 голос
/ 11 января 2020

Просто добавьте новую функцию (это описание того, что должно быть после отправки этой формы), в этом случае вы используете:

event.preventDefault () -

предотвращение ошибок интерфейса интерфейса Event ( ) сообщает агенту пользователя, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться, как обычно: 

onSubmit(event){
    event.preventDefault()
}

и в форме: 

 <form onSubmit={this.onSubmit}>

Чтобы создать неупорядоченный список, используйте что-то вроде этого (кредит Робину Вируху): 

import React from 'react';
const initialList = [
  'Learn React',
  'Learn Firebase',
  'Learn GraphQL',
];
const ListWithAddItem = () => {
  const [value, setValue] = React.useState('');
  const [list, setList] = React.useState(initialList);
  const handleChange = event => {
    setValue(event.target.value);
  };
  const handleSubmit = event => {
    if (value) {
      setList(list.concat(value));
    }
    setValue('');
    event.preventDefault();
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" value={value} onChange={handleChange} />
        <button type="submit">Add Item</button>
      </form>
    </div>
  );
};
export default ListWithAddItem;
...