Question

编辑：确定问题：此代码导致它无法正常工作。如果我改变它：

{this.state.formVisible
          ? <Form onClick={this.hideForm}/>
          : <AddBtn onClick={this.showForm}/>
}

到此：

<Form/>

它有效吗？为什么？我不明白为什么我不能显示和隐藏表单组件，仍然有脚本工作???

我在React应用中正确使用脚本时遇到问题。当我直接在一个组件（App.js）中呈现表单时，它正常工作，但我将表单移动到它自己的组件，现在在App.js中呈现组件，现在导入的脚本将无法工作。 / p>

这是两个文件的细分（我需要运行的脚本是custom.js）。如您所见，将脚本导入任一文件都不起作用，因为从不使用该脚本。

呈现“Form”组件的第一个文件（App.js）：

import React, {Component} from 'react';
import './App.css';
var script = require('./custom.js');
import AddBtn from './AddBtn.js';
import Form from './Form.js';

class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      formVisible: false
    };
  };
  showForm = () => {
    this.setState({formVisible: true});
  }
  hideForm = () => {
    this.setState({formVisible: false});
  }
  render() {
    return (
      <div className="header">
        <h1 id="p2">Contact Book</h1>
        <form className="search">
          <input type="text" name="search" placeholder="Search by last name"/>
          <button type="button">Search</button>
        </form>
        {this.state.formVisible
          ? <Form onClick={this.hideForm}/>
          : <AddBtn onClick={this.showForm}/>
}
      </div>
    );
  }
}

export default App;

包含表单的第二个文件：

import React, {Component} from 'react';
var script = require('./custom.js');

class Form extends Component {
    render() {
        return (
            <form id="addform">
                <input type="text" name="fname" placeholder="First name" required/>
                <input type="text" name="lname" placeholder="Last name" required/>
                <input type="email" name="email" placeholder="email" required/>
                <input type="input" name="address" placeholder="address" required/>
                <input type="tel" name="phone" placeholder="phone number" required/>
                <input type="submit" id="submitbtn" value="Submit"/>
                <button type="button" id="closebtn" onClick={this.props.onClick}>Close</button>
            </form>
        );
    }
}

export default Form;

AAAAND脚本本身（这并不重要。我已经知道它可以正常工作了。）

import $ from 'jquery';

//will hold an array of people objects
var list = [];

//constructor that builds new people to add to address book
function Person(first, last, email, address, phone) { //new person constructor
    this.firstName = first;
    this.lastName = last;
    this.email = email;
    this.address = address;
    this.phone = phone;
};

$(document).ready(function () {
    // When the submit button is clicked, create a new person and add the values of
    // the form fields  to the properties of the object
    $("#addform")
        .submit(function (e) {
            e.preventDefault();
            var person = new Person($("input[name = 'fname']").val(), $("input[name = 'lname']").val(), $("input[name = 'email']").val(), $("input[name = 'address']").val(), $("input[name = 'phone']").val());
            list.push(person);
            console.log(list);
        });
});

Answer 1

不依赖于jQuery运行的DOM节点，而是坚持React的范围。

class Form extends Component {
  handleSubmit = e => {
    e.preventDefault();
    let data = new FormData(e.target)
    for (let [key, val] of data.entries()) {
      // do something with your data
      console.log(key, val);
    }
  }
  render() {
    return (
      <form id="addform" onSubmit={this.handleSubmit}>
        <input type="text" name="fname" placeholder="First name" required/>
        <input type="text" name="lname" placeholder="Last name" required/>
        <input type="email" name="email" placeholder="email" required/>
        <input type="input" name="address" placeholder="address" required/>
        <input type="tel" name="phone" placeholder="phone number" required/>
        <input type="submit" id="submitbtn" value="Submit"/>
        <button type="button" id="closebtn" onClick={this.props.onClick}>Close</button>
      </form>
    );
  }
}

这样你根本就不需要你的外部脚本，或jQuery，你可以保持你的父组件中的条件三元组。

React / ES6：无法导入脚本

1 个答案: