以用户输入作出反应的js动态

Question

import React, { Component } from 'react'; 
 
import { Link } from 'react-router' 
 
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap'; 
 

 
class Modals extends Component { 
 
    constructor(){ 
 
    super(); 
 
    alert("start3e"); 
 
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" , 
 
{ 
 
    method: 'post', 
 
    headers: { 
 
    'Content-Type': 'application/json', 
 
    'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs' 
 
}, 
 
body: JSON.stringify({ 
 
    name: "beacon name 123", 
 
    description: "beacon description here for beacon", 
 
    uuid: "mnvijefnvj4356vrev", 
 
    major: "7", 
 
    minor: "9", 
 
    manufacturer: "m:2-3=0215,i:4-19,i:20-21,i:22-23,p:24-24", 
 
    beaconType: "type9", 
 
    location: "main gate8", 
 
    floor: "ist", 
 
    zone: "58c29c06d3ec866803040e6e" 
 
}) 
 
}).then(function(response){ 
 
    if(response.ok) { 
 
     console.log(response) 
 
    return response; 
 
    } 
 
    throw new Error('Network response was not ok.'); 
 
}).then(function(data) { 
 
    console.log(data); 
 
}) 
 
.catch(function(error) { 
 
    console.log('There has been a problem with your fetch operation: ' + error); 
 
}); 
 
} 
 
    render() { 
 
    return (<div><div> 
 
      <div className="animated fadeIn"> 
 
      <br /><div className="card" style={{ width: 57 + '%' }}> 
 
       <div className="card-header"> 
 
       Beacon Settings 
 
       </div> 
 
       <div className="card-block"> 
 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="icon-user"></i></span> 
 
        <input type="text" className="form-control" placeholder="UUID" /> 
 
       </div> 
 

 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="fa fa-align-justify"></i></span> 
 
        <input type="text" className="form-control" placeholder="Major Number"/> 
 
       </div> 
 

 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="fa fa-align-justify"></i></span> 
 
        <input type="text" className="form-control" placeholder="Minor Number"/> 
 
       </div> 
 

 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="fa fa-align-justify"></i></span> 
 
        <input type="text" className="form-control" placeholder="Manufacturer Number"/> 
 
       </div><center> 
 
       <Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Save</Link> 
 

 
<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link> 
 
</center> 
 

 
      </div> 
 
      </div> 
 
</div></div> 
 
     </div> 
 
     
 
     
 
     
 
    ) 
 
    } 
 
} 
 

 
export default Modals;

我想仅从屏幕取用户的输入。 如何接受？ 之后，我会发布这些值在服务器上使用邮政要求，这是正常工作。 我只是想在屏幕上的字段中的用户值和那些动态地发送到服务器

Answer 1

import React, { Component } from 'react'; 
 
import { Link } from 'react-router' 
 
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap'; 
 

 
class Modals extends Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = {inputuuid: '', 
 
    inputmajor: '' , 
 
    inputminor: '' , 
 
    inputmanufacturer: ''}; 
 
    this.handleUuid = this.handleUuid.bind(this); 
 
    this.handleMajor = this.handleMajor.bind(this); 
 
    this.handleMinor = this.handleMinor.bind(this); 
 
    this.handleManufacturer = this.handleManufacturer.bind(this); 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    alert("started"); 
 
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" , 
 
{ 
 
    method: 'post', 
 
    headers: { 
 
    'Content-Type': 'application/json', 
 
    'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs' 
 
}, 
 
body: JSON.stringify({ 
 
    name: "beacon name 1234", 
 
    description: "beacon description here for beacon", 
 
    uuid: this.state.inputuuid, 
 
    major: "{this.state.inputmajor}", 
 
    minor: "{this.state.inputminor}", 
 
    manufacturer: "{this.state.inputmanufacturer}", 
 
    beaconType: "type9", 
 
    location: "main gate8", 
 
    floor: "ist", 
 
    zone: "58c29c06d3ec866803040e6e" 
 
}) 
 
}).then(function(response){ 
 
    if(response.ok) { 
 
     console.log(response) 
 
    return response; 
 
    } 
 
    throw new Error('Network response was not ok.'); 
 
}).then(function(data) { 
 
    console.log(data); 
 
}) 
 
.catch(function(error) { 
 
    console.log('There has been a problem with your fetch operation: ' + error); 
 
}); 
 
} 
 

 
handleUuid(event) { 
 

 
    this.setState({inputuuid: event.target.value}); 
 
    } 
 
    handleMajor(event){ 
 
    this.setState({inputmajor: event.target.value}); 
 
    } 
 
    handleMinor(event){ 
 
    this.setState({inputminor: event.target.value}); 
 
    } 
 
    handleManufacturer(event){ 
 
     this.setState({inputmanufacturer: event.target.value}); 
 
    } 
 
handleSubmit(event) { 
 

 
    alert('Submitted: ' + this.state.inputuuid + this.state.inputmajor + this.state.inputminor + this.state.inputmanufacturer); 
 
    event.preventDefault(); 
 
    } 
 

 
    render() { 
 
    const uuid= this.state.inputuuid; 
 
    return (<div><div> 
 
      <div className="animated fadeIn"> 
 
      <br /><div className="card" style={{ width: 57 + '%' }}> 
 
       <div className="card-header"> 
 
       Beacon Settings 
 
       </div> 
 
       <div className="card-block"> 
 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="icon-user"></i></span> 
 
        <input type="text" className="form-control" value={this.state.inputuuid} onChange={this.handleUuid} placeholder="UUID" /> 
 
       </div> 
 

 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="fa fa-align-justify"></i></span> 
 
        <input type="text" className="form-control" value={this.state.inputmajor} onChange={this.handleMajor} placeholder="Major Number"/> 
 
       </div> 
 

 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="fa fa-align-justify"></i></span> 
 
        <input type="text" className="form-control" value={this.state.inputminor} onChange={this.handleMinor} placeholder="Minor Number"/> 
 
       </div> 
 

 
       <div className="input-group mb-1"> 
 
        <span className="input-group-addon"><i className="fa fa-align-justify"></i></span> 
 
        <input type="text" className="form-control" value={this.state.inputmanufacturer} onChange={this.handleManufacturer} placeholder="Manufacturer Number"/> 
 
       </div><center> 
 
       <Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" onClick={this.handleSubmit} activeClassName="active">Save</Link> 
 

 
<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link> 
 
</center> 
 

 
      </div> 
 
      </div> 
 
</div></div> 
 
     </div> 
 
     
 
     
 
     
 
    ) 
 
    } 
 
} 
 

 
export default Modals;

这就是答案，因为我曾在不同的输入应用不同的状态

Answer 2

通常我使用redux-形式，这使得它很容易收集表单提交值。

如果你不使用它（我没有看到你这样做），您可以执行下列操作之一：

1. 介绍状态，整个组件和的onChange处理程序，所有输入更新状态
2. 为每个输入设置ref并获取提交处理函数中的值。

如果您没有需要验证表单的情况，那么您不需要state和ref可以帮助您。

所以完整的代码例子是一些为：

import React, {Component} from 'react'; 
import {Link} from 'react-router' 
import {Dropdown, DropdownMenu, DropdownItem, Progress} from 'reactstrap'; 

class Modals extends Component { 
    constructor() { 
    super(); 

    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit() { 
    const uuid = this.uuid.value; 
    const manufacturer = this.manufacturerNumber.value; 
    const minor = this.minorNumber.value; 
    const major = this.majorNumber.value; 

    fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" , 
    { 
     method: 'post', 
     headers: { 
     'Content-Type': 'application/json', 
     'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs' 
    }, 
    body: JSON.stringify({ 
     name: "beacon name 123", 
     description: "beacon description here for beacon", 
     uuid: uuid, 
     major: major, 
     minor: minor, 
     manufacturer: manufacturer, 
     beaconType: "type9", 
     location: "main gate8", 
     floor: "ist", 
     zone: "58c29c06d3ec866803040e6e" 
    }) 
    }).then(function(response){ 
     if(response.ok) { 
      console.log(response) 
     return response; 
     } 
     throw new Error('Network response was not ok.'); 
    }).then(function(data) { 
     console.log(data); 
    }) 
    .catch(function(error) { 
     console.log('There has been a problem with your fetch operation: ' + error); 
    }); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <div className="animated fadeIn"> 
      <br/> 
      <div className="card" style={{ 
      width: 57 + '%' 
      }}> 
      <div className="card-header"> 
       Beacon Settings 
      </div> 
      <div className="card-block"> 
       <div className="input-group mb-1"> 
       <span className="input-group-addon"> 
        <i className="icon-user" /> 
       </span> 
       <input 
        ref={ref => (this.uuid = ref)} 
        type="text" 
        className="form-control" 
        placeholder="UUID" 
       /> 
       </div> 

       <div className="input-group mb-1"> 
       <span className="input-group-addon"> 
        <i className="fa fa-align-justify" /> 
       </span> 
       <input 
        ref={ref => (this.majorNumber = ref)} 
        type="text" 
        className="form-control" 
        placeholder="Major Number" 
       /> 
       </div> 

       <div className="input-group mb-1"> 
       <span className="input-group-addon"> 
        <i className="fa fa-align-justify" /> 
       </span> 
       <input 
        ref={ref => (this.minorNumber = ref)} 
        type="text" 
        className="form-control" 
        placeholder="Minor Number" 
       /> 
       </div> 

       <div className="input-group mb-1"> 
       <span className="input-group-addon"> 
        <i className="fa fa-align-justify" /> 
       </span> 
       <input 
        ref={ref => (this.manufacturerNumber = ref)} 
        type="text" 
        className="form-control" 
        placeholder="Manufacturer Number" 
       /> 
       </div> 

       <center> 
       <Button type="submit" color="primary"> 
        Click me to send values to the api! 
       </Button> 
       <Link to={'/components/tabs'} 
        className="nav-link btn btn-block btn-success" 
        activeClassName="active" 
        style={{ 
        width: 27 + '%' 
        }} 
       > 
        Save 
       </Link> 

       <Link to={'/components/tabs'} 
        className="nav-link btn btn-block btn-success" 
        activeClassName="active" 
        style={{ 
        width: 27 + '%' 
        }} 
       > 
        Advanced Settings 
       </Link> 
       </center> 
      </div> 
      </div> 
     </div> 
     </form> 
    ) 
    } 
} 

export default Modals; 

我没有测试它，但它应该让你在做什么的想法。 通常我不会使用refs来获取输入值，因为我在最近的所有项目中都使用了redux-form。一定要检查一下。