VariableInput
基本用法
function App() {
const [text, setText] = useState('')
const UIGapFilling = ({ offsetKey, contentState, entityKey, index }) => {
const { text } = contentState.getEntity(entityKey).getData()
return (
<span className="kf-ai-point-content" style={{ cursor: 'pointer' }}>
{text}
</span>
)
}
return (
<div className="create-exam">
<div className="create-exam__bd">
<div className="exam-topic--item" style={{ width: '100%' }}>
<div className="item-title ">第8题（简答题）</div>
<div className="topic-edit__before">
<VariableInputProvider>
<VariableInputContext.Consumer>
{({ entities, insertEntity, removeEntity, modifyEntity }) => {
return (
<div className="kf-ai-form kf-ai-label-left">
<div className="kf-ai-form-item kf-ai-item-error">
<label className="kf-ai-form-item-label">题目</label>
<div className="kf-ai-form-item-content">
<div className="kf-ai-input-wrapper kf-ai-input-wrapper-point">
<VariableInput
className="kf-ai-input editDiv"
value={text}
onChange={setText}
Component={UIGapFilling}
onChangeBefore={(editorState) => {
return EditorUtilities.mapEachEntity(
editorState,
({ key, contentState }, index) => {
const data = contentState
.getEntity(key)
.getData()
if (
data &&
data.text !== `填空${index + 1}`
) {
return EditorUtilities.modifyEntity(
contentState,
key,
{ text: `填空${index + 1}` }
)
}
return contentState
}
)
}}
placeholder="请输入500字以内的试题答案"
/>
<Button
className="kf-ai-point-button"
onMouseDown={(e) => {
e.preventDefault()
insertEntity('填空')
}}
>
插入填空符
</Button>
</div>
<div className="kf-ai-form-item-errortip">
内容上限300字，已超出94字
</div>
</div>
</div>
<div className="kf-ai-form-item options-item">
<label className="kf-ai-form-item-label">
选项设置
</label>
<div className="kf-ai-form-item-content">
<div className="kf-ai-form-item-number-tip">
<div className="kf-ai-form-item-tip-number">
选项内容
</div>
<div className="kf-ai-form-item-tip-number">
正确答案
</div>
</div>
{entities &&
entities.length > 0 &&
entities.map((entity, index) => {
return (
<div
className="options-item__content"
key={entity.key}
>
<div className="kf-ai-input-wrapper">
<input
className="kf-ai-input editDiv"
value={entity.text}
placeholder="请输入选项内容"
/>
</div>
<div className="options">
<i className="iconfont icon-add" />
<i
className="iconfont icon-del"
onClick={() => {
removeEntity(entity.key)
}}
/>
</div>
</div>
)
})}
<div className="options-item__content">
<div className="kf-ai-input-wrapper">
<div
className="kf-ai-input editDiv"
placeholder="请输入选项内容"
></div>
</div>
<div className="options">
<i className="iconfont icon-add"></i>
<i className="iconfont icon-del"></i>
<label className="kf-radio-wrapper kf-radio-disabled">
<span className="kf-radio">
<input
type="checkbox"
name="radio"
className="kf-radio-input"
disabled
/>
<span className="kf-checkout-inner">
<i className="iconfont icon-116"></i>
</span>
</span>
</label>
</div>
</div>
</div>
</div>
<div className="kf-ai-form-item kf-ai-item-error">
<label className="kf-ai-form-item-label">题目</label>
<div className="kf-ai-form-item-content">
<div className="kf-ai-input-wrapper kf-ai-input-wrapper-point">
<div
className="kf-ai-input editDiv"
placeholder="请输入300字以内的试题题目"
>
德邦总管
<span className="kf-ai-point-content">填空1</span>
熔岩巨兽
</div>
<div className="kf-ai-point-button">插入填空符</div>
</div>
<div className="kf-ai-form-item-errortip">
内容上限300字，已超出94字
</div>
</div>
</div>
<div className="kf-ai-form-item">
<label className="kf-ai-form-item-label">
参考答案
</label>
<div className="kf-ai-form-item-content">
<div className="kf-ai-input-wrapper">
<div
className="kf-ai-input editDiv"
placeholder="请输入500字以内的试题答案"
/>
</div>
</div>
</div>
<div className="kf-ai-form-item">
<label className="kf-ai-form-item-label">解析</label>
<div className="kf-ai-form-item-content">
<div className="kf-ai-input-wrapper">
<div
className="kf-ai-input editDiv"
placeholder="非必填项"
/>
</div>
</div>
</div>
<div className="kf-ai-form-item">
<label className="kf-ai-form-item-label">分值</label>
<div className="kf-ai-form-item-content">
<div className="kf-ai-input-wrapper width240">
<div
className="kf-ai-input editDiv"
placeholder="请设定本题满分分值"
/>
</div>
</div>
</div>
</div>
)
}}
</VariableInputContext.Consumer>
</VariableInputProvider>
<div className="btn-area">
<Button type="default">取消</Button>
<Button type="primary" disabled>
确定
</Button>
</div>
</div>
</div>
</div>
</div>
)
}
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 内容 | ReactNode | -- |
| className | 类名 | string | -- |
| style | 样式 | CSSProperties | -- |
| value | 当前值 | string | -- |
| multiline | 是否多行 | boolean | false |
| placeholder | 提示 | string | -- |
| disabled | 是否禁用 | boolean | -- |
| readOnly | 是否只读 | boolean | -- |
| Component | 组件 | ReactNode | -- |
| variableTemplate | variableTemplate | variableTemplateType | -- |
| variableParser | variableParser | Func | -- |
| onChangeBefore | onChangeBefore | Func | -- |
| onChange | 值变化时触发 | Func | -- |
| onFocus | 聚焦时触发 | Func | -- |
| onBlur | 失焦时触发 | Func | -- |