以用戶輸入作出反應的js動態

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;

我想僅從屏幕取用戶的輸入。如何接受？之後，我會發布這些值在服務器上使用郵政要求，這是正常工作。我只是想在屏幕上的字段中的用戶值和那些動態地發送到服務器

來源

2017-03-11 Piyush

您可以設置OnChange屬性爲每個inpu它將調用回調像這樣的onChange = {（事件）= > console.log（event.target.value）}。每當您更改輸入值 –

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;

這就是答案，因爲我曾在不同的輸入應用不同的狀態

來源

2017-03-15 05:42:30 Piyush

爲什麼不創建一個通用函數來更新基於密鑰的狀態變量？你並不需要創建如此多的handleXXX（）。 – MattYao

你能提供關於這個的代碼嗎？ – Piyush

它將被複制。請檢查此帖：（http://stackoverflow.com/questions/29280445/reactjs-setstate-with-a-dynamic-key-name） – MattYao

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

如果你不使用它（我沒有看到你這樣做），您可以執行下列操作之一：

介紹狀態，整個組件和的onChange處理程序，所有輸入更新狀態
爲每個輸入設置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。一定要檢查一下。

來源

2017-03-11 13:51:57 gor181

引用未定義 – Piyush

時，將觸發此事件。正如我所說的那樣，我沒有對它進行測試。潛在的問題可能是分配refs時出現拼寫錯誤。無論接受的答案是否正確，因爲它將值存儲爲狀態。 – gor181

以用戶輸入作出反應的js動態

回答

相關問題