Question

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

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

我认为您已经错过了eventHandlers的工作方式。它们在事件上触发，并且它们接收事件对象作为输入。在这种情况下，您必须使用触发change事件时附带的事件对象。

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>
    );
  }
}

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

Answer 2

您可以从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');
}

您还应该详细了解how ES Modules work。

Answer 3

要使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>
     );
  }
}

如何在ReactJS中按下按钮将值传递给导入的模块

3 个答案: