如何解决Html 在 Redux 表单字段上放置固定文本
如何将默认文本放入用户无法删除的 Redux 表单字段中(输入开始时的固定文本)。
我想要的第二件事是光标将在此固定文本之后编入索引。
不使用 redux:Html Put a fixed text on an input text
解决方法
您可以防止在 onChange
回调中更改输入值前缀:
const {useState} = React;
const Component = ({defaultText}) => {
const [text,setText] = useState(defaultText);
const onChangeText = (e) => {
if (e.target.value.substr(0,defaultText.length) === defaultText)
setText(e.target.value);
}
return (
<div>
<input onChange={onChangeText} value={text} />
</div>
)
}
ReactDOM.render(<Component defaultText='ABC'/>,document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
input {
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
UPD: Redux Form Field
使用:
import React,{useState} from "react";
import { Field } from "redux-form";
const defaultText = "ABC";
const TextWithPrefix = () => {
const [text,setText] = useState(defaultText);
const onChangeText = (e) => {
if (e.target.value.substr(0,defaultText.length) === defaultText)
setText(e.target.value);
};
return (<input onChange={onChangeText} value={text} />);
};
const FormComponent = ({ handleSubmit,onSubmit }) => {
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<Field component={TextWithPrefix} />
</form>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。