Как передать значение импортированному модулю нажатием кнопки в реагировать

Question

Прежде всего, я нуб.В моем проекте я импортирую модуль с именем «sms.js» в «app.js», и мне нужно передать значение текстовой области переменной (var message_body) внутри «sms.js», когда я нажимаюкнопка.Вот код, который я использую.

sms.js

var message_body = 'Value Passing Modules';
console.log(message_body);

---

App.js

import React, { Component } from 'react';
import './App.css';
import Sms from './Sms/Sms';
class App extends Component {
  smsHandler =() => {
    Sms();
    console.log('Sms Handler Function Testing');
  }

  render() {
    return (
      <div className="App">
        <form>
          <label>
            Name: 
            <input type="text" name="body" />
          </label>
        </form>
       <button onClick={this.smsHandler}>Click here</button>
      </div>
    );
  }
}

Answer 1

Вы можете экспортировать метод из Sms.js, чтобы получить параметр, и вы можете передать этот ввод из App.js

Sms.js

export default function(message_body) {
  // var message_body = 'Value Passing Modules';
  console.log(message_body);
}

App.js

smsHandler =() => {
  Sms("some value");
  console.log('Sms Handler Function Testing');
}

Вы также должны прочитать , как работают ES-модули подробно.

Answer 2

Чтобы sms.js мог получать и обрабатывать некоторые данные, он должен экспортировать функцию, чтобы другие модули могли видеть и использовать ее.

sms.js

var message_body = '';

export default function processMessage(msg) {
    message_body = msg;
    console.log(`Received message: ${msg}`);
}

Чтобы получитьЗначение ввода при щелчке, объект event передается в функцию обработчика щелчка inputValueChange, которая содержит текст через event.target.value.Как только мы установим этот текст в состояние, всякий раз, когда мы нажимаем кнопку, мы читаем текст ввода из состояния и отправляем его в наш модуль SMS.

app.js

import React, { Component } from 'react';
import './App.css';
import SMS from './Sms/Sms';
class App extends Component {

  constructor(props) {
      super(props);
      this.smsHandler = this.smsHandler.bind(this);
      this.inputValueChange = this.inputValueChange.bind(this);

      this.state = {
          inputValue: ""
      };
  }

  smsHandler() {
    SMS(this.state.inputValue);
    console.log('Sms Handler Function Testing');
  }

  inputValueChange(e) {
    this.setState({ inputValue: e.target.value });
  }

  render() {
    return (
      <div className="App">
        <form>
          <label>
            Name: 
            <input type="text" name="body" value={this.state.inputValue} onChange={this.inputValueChange} />
          </label>
        </form>
       <button onClick={() => { this.smsHandler(); } }>Click here</button>
      </div>
     );
  }
}

Answer 3

Я думаю, что вы упустили способ работы EventHandlers.Они инициируются событиями и получают объект события в качестве входных данных.В этом случае вы должны использовать объект события, который появляется при запуске события изменения.

sms.js

// var message_body = 'Value Passing Modules';
// console.log(message_body);
export default function print(message) {
  console.log('received message -- ', message);
}

app.js

import React, { Component } from 'react';
import './App.css';
import Sms from './Sms/Sms';
class App extends Component {
  smsHandler =(e) => {
    Sms(e.target.value);
    console.log('Sms Handler Function Testing');
  }

  render() {
    return (
      <div className="App">
        <form>
          <label>
            Name: 
            <input type="text" name="body" />
          </label>
        </form>
      <button onClick={this.smsHandler}>Click here</button>
      </div>
    );
  }
}

Пожалуйста, ознакомьтесь с обработчиками событий.