Изменение state

@Devestagion · Регистрация: 21.04.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, столкнулся с такой проблемой:
Есть компонент App, внутри которого есть state.value. Нужно c помощью компонента Child при нажатии в нем на условный элемент (div,p и т.д.) изменить значение state.value 0 на любое значение. Код выглядит примерно следующим образом:
App.jsx

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react;
import './App.css';
import Child from './Child.jsx';
class App extends React.Component {
state={
    value: 0
  }
change = () =>{
this.state.value = this.setState({value:123})}
}
render(){
return <div>
<Child change = {this.change}/>
</div>}
}

Это делается только с помощью Redux? Или же можно самому как то передать функцию, которая перезапишет значение стейта в Арр?

@Egor.S · 27.08.2019, 08:07

JavaScript
1
change = () => this.setState({value:123})

@j2FunOnly · 27.08.2019, 08:36

Сообщение от Devestagion

можно самому как то передать функцию, которая перезапишет значение стейта в Арр?

Вы же передали её как props в Child компонент, так и вызывайте её по нужному событию.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const { Component } = React;
const { render } = ReactDOM;
 
const Child = props => {
  return (
    <p onClick={props.change}>Click me</p>
  )
}
 
class App extends Component {
  state = {
    value: 0
  }
  
  change = () => {
    this.setState({ value: 123 });
  }
  
  render () {
    return (
      <div>
        Current value is {this.state.value}
        <Child change={this.change} />
      </div>
    )
  }
}
 
render(<App />, document.querySelector('#app'));

https://jsfiddle.net/j2FunOnly/kbv3rcht/

@Devestagion · 29.08.2019, 11:00 **[ТС]**

Простите, что долго не отписывал, НО, я знаю как изменить стейт так, как описали вы. Проблема в том, что мне нужно с помощью change изменить значение не на 123, а на то, которое находится внутри Child, допустим там переменная со своим значением. Не подскажете как это сделать?

@Egor.S · 29.08.2019, 11:29

Devestagion, передавать как аргумент в функцию

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const { Component } = React;
const { render } = ReactDOM;
 
const Child = props => {
  return (
    <p onClick={() => props.change(666)}>Click me</p>
  )
}
 
class App extends Component {
  state = {
    value: 0
  }
  
  change = (value) => {
    this.setState({ value });
  }
  
  render () {
    return (
      <div>
        Current value is {this.state.value}
        <Child change={(this.change)} />
      </div>
    )
  }
}
 
render(<App />, document.querySelector('#app'));

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Devestagion 0 / 0 / 0 Регистрация: 21.04.2018 Сообщений: 30
	29.08.2019, 11:00 [ТС]
	Простите, что долго не отписывал, НО, я знаю как изменить стейт так, как описали вы. Проблема в том, что мне нужно с помощью change изменить значение не на 123, а на то, которое находится внутри Child, допустим там переменная со своим значением. Не подскажете как это сделать? 0