Reactjs 在react js中动态获取用户输入

import React，{Component}来自'React'；
从“反应路由器”导入{Link}
从“reactstrap”导入{Dropdown，DropdownMenu，DropdownItem，Progress}；
类Modals扩展组件{
构造函数（）{
超级（）；
警报（“start3e”）；
取回（“http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
{
方法：“post”，
标题：{
“内容类型”：“应用程序/json”，
“授权”：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.Eyjfawqioi1gmyotdowqzzwm4njy4dmwndblnjgillcjlbwfci6imtrqgxpdglmzxhzxh3royw1lijois2lzag9yzisimlhdci6m30.nhw5ssov8ysziblmw2vnlg2vni3czfr-v4jeg9ubvs'
},
正文：JSON.stringify({
名称：“信标名称123”，
描述：“此处为信标的信标描述”，
uuid：“mnvijefnvj4356vrev”，
少校：“7”，
小调：“9”，
制造商：“m:2-3=0215，i:4-19，i:20-21，i:22-23，p:24-24”，
beaconType:“type9”，
位置：“主网关8”，
现场：“ist”，
区域：“58c29c06d3ec866803040e6e”
})
}).然后（功能（响应）{
if（response.ok）{
console.log（响应）
返回响应；
}
抛出新错误（'网络响应不正常'）；
}).then（函数（数据）{
控制台日志（数据）；
})
.catch（函数（错误）{
console.log（'提取操作出现问题：'+错误）；
});
}
render（）{
返回(


信标设置
拯救
预先设置
)
}
}
导出默认模态通常我使用redux表单，这使得在表单提交时收集值非常容易

如果您没有使用它（我看您没有），可以执行以下操作之一：

将状态引入整个组件，并将onChange处理程序引入更新状态的所有输入
将ref设置为每个输入，并在submithandler函数中获取值
如果您没有需要验证表单的案例，那么您不需要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;

import React，{Component}来自'React'；
从“反应路由器”导入{Link}
从“reactstrap”导入{Dropdown，DropdownMenu，DropdownItem，Progress}；
类Modals扩展组件{
构造函数（）{
超级（）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（）{
const uuid=this.uuid.value；
const manufacturer=this.manufacturerNumber.value；
const minor=this.minorNumber.value；
常量major=this.majorNumber.value；
取回（“http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
{
方法：“post”，
标题：{
“内容类型”：“应用程序/json”，
“授权”：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.Eyjfawqioi1gmyotdowqzzwm4njy4dmwndblnjgillcjlbwfci6imtrqgxpdglmzxhzxh3royw1lijois2lzag9yzisimlhdci6m30.nhw5ssov8ysziblmw2vnlg2vni3czfr-v4jeg9ubvs'
},
正文：JSON.stringify({
名称：“信标名称123”，
描述：“此处为信标的信标描述”，
uuid:uuid，
少校：少校，
小调：小调，
制造商：制造商，
beaconType:“type9”，
位置：“主网关8”，
现场：“ist”，
区域：“58c29c06d3ec866803040e6e”
})
}).然后（功能（响应）{
if（response.ok）{
console.log（响应）
返回响应；
}
抛出新错误（'网络响应不正常'）；
}).then（功能（数据）{
控制台日志（数据）；
})
.catch（函数（错误）{
console.log（'提取操作出现问题：'+错误）；
});
}
render（）{
返回(


信标设置
（this.uuid=ref）}
type=“text”
className=“表单控件”
占位符=“UUID”
/>
（this.majorNumber=ref）}
type=“text”
className=“表单控件”
占位符=“主要编号”
/>
（this.minorNumber=ref）}
type=“text”
className=“表单控件”
占位符=“次要编号”
/>
（this.manufacturerNumber=ref）}
type=“text”
className=“表单控件”
占位符=“制造商编号”
/>
单击我向api发送值！
拯救
高级设置
)
}
}
导出默认模态；

我还没有测试过，但它会让你知道该怎么做。
通常我不会使用refs来获取输入值，因为我在最近的所有项目中都使用redux表单。一定要查看它。

import React，{Component}来自'React'；
从“反应路由器”导入{Link}
从“reactstrap”导入{Dropdown，DropdownMenu，DropdownItem，Progress}；