freeCodeCamp

6.6 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036173	Set State with this.setState	6	false		Установить состояние с this.setState

Description

Предыдущие проблемы охватывали state компонента и как инициализировать состояние в constructor . Существует также способ изменения компоненты state . React предоставляет способ обновления state компонента, называемого setState . Вы вызываете метод setState в своем классе компонентов следующим образом: this.setState() , передавая объект с парами ключ-значение. Ключами являются ваши свойства состояния, а значения - это обновленные данные состояния. Например, если мы сохраняем username в состоянии и хотим его обновить, он будет выглядеть так:

this.setState ({
имя пользователя: 'Lewis'
});

React ожидает, что вы никогда не измените state напрямую, вместо этого всегда используйте this.setState() когда происходят изменения состояния. Кроме того, вы должны отметить, что React может выполнять несколько обновлений состояния, чтобы повысить производительность. Это означает, что обновления состояния через метод setState могут быть асинхронными. Существует альтернативный синтаксис метода setState который обеспечивает способ решения этой проблемы. Это редко необходимо, но хорошо помнить об этом! Для получения дополнительной информации обратитесь к документации React .

Instructions

В редакторе кода есть элемент button который имеет обработчик onClick() . Этот обработчик запускается, когда button получает событие click в браузере и запускает метод handleClick определенный в MyComponent . В методе handleClick обновите state компонента, используя this.setState() . Задайте свойство name в state равным строке React Rocks! , Нажмите кнопку и просмотрите обновленное состояние. Не беспокойтесь, если вы не совсем понимаете, как работает код обработчика кликов. Это связано с предстоящими проблемами.

Tests

tests:
  - text: 'Состояние <code>MyComponent</code> должно инициализироваться с помощью пары значений ключа <code>{ name: Initial State }</code> .'
    testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "Initial State", "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.");'
  - text: <code>MyComponent</code> должен отображать заголовок <code>h1</code> .
    testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("h1").length === 1, "<code>MyComponent</code> should render an <code>h1</code> header.");'
  - text: 'Представленный <code>h1</code> заголовок должен содержать текст, отображаемый из состояния компонента.'
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/<h1>TestName<\/h1>/.test(firstValue), "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state."); };'
  - text: 'Вызов метода <code>handleClick</code> на <code>MyComponent</code> должен установить свойство name в состоянии равным <code>React Rocks!</code> ,'
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "Before" }); return waitForIt(() => mockedComponent.state("name")); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state("name")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "Before" && secondValue === "React Rocks!", "Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>."); };'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Initial State'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    // change code below this line

    // change code above this line
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

6.6 KiB Raw Blame History Unescape Escape