javascript - 在 React.JS 中，如何在渲染字段的组件上设置 readOnly 属性

Question

React.JS 提供了多种实现组件的机制——基于类，通过 React.JS 钩子(Hook)实现组件，也可以使用 Styled-Components .在 Web 应用程序中，有时想要设置 readOnly input 上的属性(property)HTML 元素。要通过 HTML 执行此操作，请使用 readOnly input 上的属性/属性HTML 元素。令人困惑的是 HTML 属性/属性没有值(value):

<!-- Create a readOnly input field to display the username -->
<input id='username' name='username' value='fred.fish' readOnly />

在 React.JS 中，如果有人使用 JSX当定义一个组件时，可以指定属性(props)。 props 的值然后使用标准 XML 属性/属性语法指定。

这是一个 React.JS 组件的示例:

const PageTitleHeading1 = (props) => {
    const {
        id,
        textLine1,
        textLine2,
        textLine3,
        showCompanyNameLogo
    } = props;

    if (id === undefined || id === null || id === '') {
        throw new Error('Bad call to BasePageTitleHeading1. id is required ' +
                        'and must not be undefined, null, or the empty string.');
    }

    const pageHeadingLine1 = (textLine1 !== undefined && textLine1 !== null &&  textLine1 !== '') ?
                             <PageHeadingLine1Style key='1' className='pageHeadingLine1Style'>{textLine1}</PageHeadingLine1Style> :
                             null;

    const pageHeadingLine2 = ((textLine2 !== undefined && textLine2 !== null &&  textLine2 !== '') || showCompanyNameLogo) ?
                             <PageHeadingLine2 key='2' className='PageHeadingLine2' showCompanNameLogo={showCompanyNameLogo ? true : false} text={(textLine2 !== undefined && textLine2 !== null) ? textLine2 : ''}/> :
                             null;

    const pageHeadingLine3 = (textLine3 !== undefined && textLine3 !== null &&  textLine3 !== '') ?
                             <PageHeadingLine3Style key='3' className='PageHeadingLine3Style'>{textLine3}</PageHeadingLine3Style> :
                             null;

    return (
        <PageHeading1 id={id} className={`pageHeading1 ${props.className}`}>
            {pageHeadingLine1}
            {pageHeadingLine2}
            {pageHeadingLine3}
        </PageHeading1>
    );
}

我可以使用标准 JSX 语法来使用组件，并使用标准 XML 属性/属性指定其属性:

        <PageTitleHeading1
            id='change-your-password-page-title-heading'
            textLine1='Welcome to the'
            textLine2=' On-Demand Training Platform'
            textLine3='Please change your password'
            showCompanyNameLogo={true}
        />

那么如果我想渲染一个 input 的 React.JS 组件怎么办？字段并设置 readOnly属性/属性？这有点令人困惑，因为在 HTML 中 readOnly input 中的属性/属性字段没有值 <input id='username' name='username' value='fred.fish' readOnly />在 React.JS 中，当指定要在组件中使用的属性/属性时，属性/属性具有值。那么如何设置readOnly渲染 input 的 React.JS 组件上的属性HTML元素/实体？

下面是一个渲染 input 的组件示例。字段使用 Styled-Components .如何渲染一个设置了 ReadOnly 属性的 React.JS 组件？

const StyledInputField = styled.input`
    width: ${props.width ? props.width : '100%'};
    height: ${props.height ? props.height : '42px'};
    padding: 10px 10px 10px 10px';
    font-family: Montserrat, sans-serif;
    font-size: 16;
    font-weight: 600;
    text-align: left;
`

Answer 1

在 React.JS 中，如果您使用 JSX，则组件中的 readOnly 函数作为 bool 属性。

下面是一个样式化的组件(见 Styled-Components )

const StyledInputField = styled.input`
    width: ${props.width ? props.width : '100%'};
    height: ${props.height ? props.height : '42px'};
    padding: 10px 10px 10px 10px';
    font-family: Montserrat, sans-serif;
    font-size: 16;
    font-weight: 600;
    text-align: left;
`

您不必真正了解或理解样式化组件即可理解此答案。现在假设我想设置 readOnly我从 StyledInputField 创建的组件上的属性组件声明？

<StyledInputField type="text" readOnly={true} />

React.JS 将 ReadOnly 解释为 ReadOnly 属性，并将其解释为真实值，因为给定组件应使用其上设置的 readOnly 属性呈现。

这实际上将为您提供以下信息:

CSS:

.styledInputField {
    width: ${props.width ? props.width : '100%'};
    height: ${props.height ? props.height : '42px'};
    padding: 10px 10px 10px 10px';
    font-family: Montserrat, sans-serif;
    font-size: 16;
    font-weight: 600;
    text-align: left;
}

HTML:

<input type="text" class="styledInputField" readOnly />

React.JS 识别 readOnly属性(property)并妥善处理。也可以使用状态值或 prop
示例 - 我在这里使用 props.isReadOnly在 StyledInputField 上设置 readOnly 属性:

<StyledInputField type="text" readOnly={props.isReadOnly} />

如果 props.isReadOnly是真的，那么 readOnly 属性将被设置。如果 props.isReadOnly是假的，它不会被设置。

True and False vs. "Truthy" and "Falsey" (or "Falsy") in Ruby, Python, and JavaScript

How to Set the readOnly TextBox in React.JS TextBox component

我最初在这里发布了这个答案 How to use as readonly .我在 StackExchange 上分享它，因为我确信其他 React.JS 开发人员需要呈现只读 input字段，并且可能有点难以弄清楚语法。我希望这有帮助。