时间戳

首页 > 解决方案 > 如何在reactjs中按下按钮时将值传递给导入的模块

javascript - 如何在reactjs中按下按钮时将值传递给导入的模块

问题描述

首先，我是菜鸟。在我的项目中，我将一个名为“sms.js”的模块导入到“app.js”，我想要的是将文本区域的值传递给“sms.js”内的一个变量（var message_body），当我按下按钮。这是我正在使用的代码。

短信.js

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

应用程序.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>
    );
  }
}

标签： javascriptreactjsimportexport

解决方案

我认为您错过了 eventHandlers 的工作方式。它们在事件上触发，并接收一个事件对象作为输入。在这种情况下，您必须使用触发更改事件时出现的事件对象。

短信.js

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

应用程序.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>
    );
  }
}

请阅读有关事件处理程序的信息。

推荐阅读