时间戳

首页 > 解决方案 > value 属性在 React Typescript 的输入 type="checkbox" 中不显示任何内容

html - value 属性在 React Typescript 的输入 type="checkbox" 中不显示任何内容

问题描述

我试图在 React Typescript 中的复选框旁边显示一些文本，并且 value 属性不起作用。如果我尝试设置任何 innerHTML，那么它会给我一个错误input is a void element tag and must neither have children nor use dangerouslySetInnerHTML. 我应该怎么做？

interface LetterOptionsProps{
    letterOptions:any

}

export default class LetterOptions extends Component<LetterOptionsProps>{
    render(){
        if(this.props.letterOptions.length>0){
            
        return(
            this.props.letterOptions.map((a:any, i:any) => {
                return (
                            <React.Fragment>
                                <input key={i} className="letter-option" type="checkbox" value={a} /> 
                            </React.Fragment>
               
                        );
                    }
                )
        );
        }else{
            return(<div></div>);
            
        }
    }
}

标签： htmlreactjstypescriptreact-typescript

解决方案

听起来您希望输入具有标签。正如错误指出的那样，输入是无效的回报，不能有任何孩子。

另外，仅供参考，React 键应该放在被包装的最外层元素上，即React.Fragment如果你仍然使用它，或者label如下所示。

this.props.letterOptions.map((a:any, i:any) => (
  <label key={i}>
    {a}
    <input className="letter-option" type="checkbox" /> 
  </label>
))

总的来说，您还可以通过一些应用的条件渲染来简化您的组件代码。

export default class LetterOptions extends Component<LetterOptionsProps>{
  render() {
    const { letterOptions } = this.props;
    return letterOptions.length ? letterOptions.map((a:any, i:any) => (
      <label key={i}>
        {a}
        <input className="letter-option" type="checkbox" /> 
      </label>
    )) : null
  }
}

推荐阅读