Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вызов класса из обработчика события React.js. / 3 сообщений из 3, страница 1 из 1
06.09.2019, 17:47
    #39858575
erman
erman
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вызов класса из обработчика события React.js.
Здравствуйте!
Такой класс :
Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
class SearchBar extends React.Component {
          render() {
              return (
                <form>
                  <label> Номер квартиры: </label>
                  <input type="text"
                    placeholder="Search..." name="numSearchApart" />
                  <input type="submit" value="Send" name="send_button" onClick= 
                   {this.apartInfo.bind(this, numSearchApart.value)} />                    
                </form>
              );              
          }
          apartInfo(e, num)
          {
              <ApartInformation apart={this.props.apart} />
          }
      }



и класс ApartInformation :
Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
class ApartInformation extends React.Component {
        render() {
          return (
              <h2> Класс ApartInformation!!! </h2>
              // Здесь хочу выводить дополнительную информацию
          );
        }
      }


<ApartInformation apart={this.props.apart} /> - при вызове класса всё исчезает на странице.
Страница одна - index.html.
Как здесь сделать правильно, чтобы у меня класс ApartInformation дорисовывал страницу ниже класса SearchBar сразу после него.
Буду благодарен за помощь!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.09.2019, 10:16
    #39859189
monstrU
monstrU
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вызов класса из обработчика события React.js.
ermanЗдравствуйте!
Такой класс :
Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
class SearchBar extends React.Component {
          render() {
              return (
                <form>
                  <label> Номер квартиры: </label>
                  <input type="text"
                    placeholder="Search..." name="numSearchApart" />
                  <input type="submit" value="Send" name="send_button" onClick= 
                   {this.apartInfo.bind(this, numSearchApart.value)} />                    
                </form>
              );              
          }
          apartInfo(e, num)
          {
              <ApartInformation apart={this.props.apart} />
          }
      }



и класс ApartInformation :
Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
class ApartInformation extends React.Component {
        render() {
          return (
              <h2> Класс ApartInformation!!! </h2>
              // Здесь хочу выводить дополнительную информацию
          );
        }
      }


<ApartInformation apart={this.props.apart} /> - при вызове класса всё исчезает на странице.
Страница одна - index.html.
Как здесь сделать правильно, чтобы у меня класс ApartInformation дорисовывал страницу ниже класса SearchBar сразу после него.
Буду благодарен за помощь!

так :) тебе ж концепцию поменять надо
зачем у тебя кнопка
<input type="submit" value="Send"
submit когда ты обрабатываешь клик? поменяй на button.
потом numSearchApart.value надо в состояниях держать и этот клик значение numSearchApart.value должен менять.

а вот уже после смены состояния на наличие выбранного numSearchApart.value нужно выводить твои <ApartInformation apart={this.props.apart} />
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.09.2019, 19:55
    #39861795
erman
erman
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вызов класса из обработчика события React.js.
Пытаюсь сделать как советуете, что-то не получается :
Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
class SearchBar extends React.Component {
            constructor(props) {
            super(props);            
            
            this.state = {numSearchApart: numSearchApart};            
            this.numSearchApart = this.apartInfo.bind(this);            
          }
          render() {
              return (
                <form>
                  <label> Номер квартиры: </label>
                  <input type="text"
                    placeholder="Search..." name="numSearchApart" value={this.state.numSearchApart} this.SetState({numSearchApart: numSearchApart.value}) />
                  <input type="button" value="Send" name="send_button" onClick={this.apartInfo.bind(this, this.state.numSearchApart)} />                    
                </form>
              );              
          }
          apartInfo(e, num)
          {
            alert("Функция ApartInfo!");            
            <ApartInformation apart={this.props.apart} />
          }
      }


У меня пустая страница запускается...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вызов класса из обработчика события React.js. / 3 сообщений из 3, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 477ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443660]:
 0ms
get settings:
 11ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 158ms
get topic data:
 12ms
get forum data:
 2ms
get page messages:
 35ms
get tp. blocked users:
 1ms
others: 239ms
total:  477ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]