我正在通过JSON数据生成我的表单。表单呈现工作正常。现在我想获取表格值，提交类似下面的东西。所以我可以调用API将这些值保存在同一个提交事件中。
{ “elementname1”： “VALUE1”， “elementname2”： “值2” “elementname2”： “VALUE2”}
有没有办法获得这样的值。
我尝试过使用formValueSelector，但是我们必须指定元素名称来获取值。
这是我的代码
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { getTemplateData } from './actions';
import autoBind from 'react-autobind';
import { Scrollbars } from 'react-custom-scrollbars';
import { getFormValues, Field, reduxForm } from 'redux-form';
import { formValueSelector } from 'redux-form';
function mapDispatchToProps(dispatch) {
return {
loadData() {
return dispatch(getTemplateData())
}
}
}
function mapStateToProps(state,ownProps) {
const selector = formValueSelector('create-template-form')
return {
...state,
templateData: state.templateData
}
}
class createTemplate extends Component {
constructor(props, context) {
super(props, context);
autoBind(this);
this.state = {
topTabSelected: "details",
leftTabSelected: "details",
tabIndex: 0,
dataIndex: 0
};
this.gotoGenRulesState = this.gotoGenRulesState.bind(this);
}
gotoGenRulesState = (data) => {
this.props.dispatch({ type: 'FORM_SUBMITTED',data});
}
componentDidMount() {
this.props.loadData();
}
render() {
const renderField = ({ field, detailType}) => {
const { type, placeholder } = field[detailType];
if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') {
return <input name={detailType + field.key} {...field.input} className="form-control" placeholder={placeholder} type={type} />
} else if (type === 'select') {
const { options } = field
return (
<select name={field.name} className="form-control" onChange={field.input.onChange}>
{options.map((option, index) => {
return <option key={index} value={option.value}>{option.label}</option>
})}
</select>
)
} else {
return <div>Type not supported.</div>
}
}
return (
<form onSubmit={this.gotoGenRulesState}>
<div>
<div className="row" style={{ padding: "30px 80px" }} >
<div className="padding-sides-none col-md-12">
<h3 className="purple-color">Create Template</h3>
<div className="tabbable">
{this.props.templateData &&
<ul className="nav nav-tabs tab-nav toptab">
{this.props.templateData.map((data, index) => (
<li className={`${data.key === this.state.topTabSelected ? 'active' : ''}`} key={data.key + index} style={{ cursor: 'pointer' }} ><a onClick={() => this.openTopTab(data.key, index)}
data-toggle="tab">{data.name}</a></li>
))}
</ul>
}
<div className="">
{this.props.templateData && this.props.templateData[this.state.tabIndex] &&
<div className="tabbable tabs-left row">
<div className="padding-sides-none col-md-4 tab-sec">
<ul className="nav tab-nav">
{this.props.templateData[this.state.tabIndex].subnodes.map((data, index) => (
<li key={data.key + index} style={{ cursor: 'pointer' }} ><a className={`${data.key === this.state.leftTabSelected ? 'detailsTitleActive' : ''}`} onClick={() => this.openDetailsTab(data.key, index)}
data-toggle="tab">{data.name}</a></li>
))}
</ul>
</div>
<div className="col-md-8 padding-sides-none inner-tab-content">
<Scrollbars style={{ height: 400 }}>
<div className="tab-content">
{this.props.templateData[this.state.tabIndex].subnodes[this.state.dataIndex].subnodes.map((field, index) => (
<div className={`form-group ${field.type === 'CompleteDetail' ? 'dynamic-field-inline' : ''}`} key={field.name}>
<label>{field.name}</label>
{field.detail &&
<span>
{field.type === 'CompleteDetail' && <label>Details</label>}
<Field
name={`details${field.key}`}
component={renderField}
field={field}
detailType='detail'
/>
</span>
}
{field.range &&
<span>
{field.type === 'CompleteDetail' && <label>Range</label>}
<Field
name={'range' + field.key}
component={renderField}
field={field}
detailType='range'
/>
</span>
}
{field.operator &&
<span>
{field.type === 'CompleteDetail' && <label >Operator</label>}
<Field
name={'operator' + field.key}
component={renderField}
field={field}
detailType='operator'
/>
</span>
}
</div>
))}
</div>
</Scrollbars>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</form>
)
}
}
createTemplate = reduxForm({
form: 'create-template-form', // a unique identifier for this form
})(createTemplate)
createTemplate = connect(
mapStateToProps,
mapDispatchToProps
)(createTemplate)
export default createTemplate;
答案 0 :(得分：0)
使用redux表单，您可以使用state.form.create-template-form获取所有表单值。
顺便说一句，您应该使用camelCase重命名表单标识符：
connect(
state => ({
myFormValues: state.form.createTemplateForm,
}),
)
由于道具this.props.myFormValues
答案 1 :(得分：0)
如果您想在提交时使用值，您也可以这样做：
submitFunction = (data) => {
console.log(data) // you can use your form data here, and you don't need form name
};
render() {
return (
<form onSubmit={this.props.handleSubmit(this.submitFunction)}>