我有一个简单的表单字段,当使用setFieldsValue触发onChange事件时,我试图设置格式并设置字段值,该方法不起作用。
我正在尝试在同一文本字段中显示格式化的值。
请在此处找到沙盒链接codeSandbox
我不想再创建一个带有状态的受控组件并设置值,因为我在原始表单数据中有20个字段。我们如何在onChange本身上设置表单值。
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button } from "antd";
const FormItem = Form.Item;
class Demo extends React.Component {
changePhone = () => {
const { setFieldsValue, getFieldValue } = this.props.form;
let drivers = getFieldValue("drivers");
console.log("driver data was", drivers);
setFieldsValue({
drivers: `1234`
});
};
handlePhoneChange = event => {
const value = event.target.value;
const { getFieldValue } = this.props.form;
let drivers = getFieldValue("drivers");
// if (!drivers.startsWith("+1 - ") && drivers.length > 3) // Another way
if (!drivers.startsWith("+1 -"))
// event.target.value = `+1 - `; // Another way
event.target.value = `+1 - ${value}`;
else
event.target.value = `${value}`;
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<Form>
<FormItem
label="phone"
style={{
display: "inline-block"
}}
>
{getFieldDecorator(`drivers`, {
initialValue: ""
})(<Input onChange={this.handlePhoneChange} />)}
</FormItem>
</Form>
<Button type="primary" onClick={this.changePhone}>
change phone
</Button>
</div>
);
}
}
const Wrapped = Form.create()(Demo);
ReactDOM.render(<Wrapped />, document.getElementById("container"));