Question

我必须以redux形式实现react-phone-number软件包。我是ReactJS和Redux的新手。我必须将我的React代码转换为redux形式的字段之一。这是反应代码。

import React from 'react';
    import ReactDOM from 'react-dom';
    import IntlTelInput from 'react-intl-tel-input';
    import '../node_modules/react-intl-tel-input/dist/main.css';
    import '../node_modules/react-intl-tel-input/dist/libphonenumber.js';


    const loadJSONP = (url, callback) => {
      const ref = window.document.getElementsByTagName('script')[0];
      const script = window.document.createElement('script');
      script.src = `${url + (url.indexOf('?') + 1 ? '&' : '?')}callback=${callback}`;
      ref.parentNode.insertBefore(script, ref);
      script.onload = () => {
        script.remove();
      };
    };

    const lookup = (callback) => {
      loadJSONP('http://ipinfo.io', 'sendBack');
      window.sendBack = (resp) => {
        const countryCode = (resp && resp.country) ? resp.country : '';
        callback(countryCode);
      }
    };

    const handler = (status, value, countryData, number, id) => {
      console.log(status, value, countryData, number, id);
    };

    ReactDOM.render(
      <IntlTelInput 
        onPhoneNumberChange={ handler }

        preferredCountries={['us','ca']}
        css={ ['intl-tel-input', 'form-control'] }
      />, 
      document.getElementById('root'),
    );

现在我想以某种方式在Redux-Form的“字段”组件中使用它，如下所示。

const FieldCountryCode = ({
  name,
  label,
  placeholder,
  value,
  showsRequired,
}: PropsT) => (
  <Field
    name={name}
    component={IntlTelInput}
    props={{
      label,
      placeholder,
      type: 'tel',
      value,
      showsRequired,
    }}
  />
);

export default FieldCountryCode;

我面临的问题是，当我尝试对Field的component属性进行操作时，它将丢失其CSS内容。这是描述其实际工作方式的链接。 link

Answer 1

尝试删除此行

{foreach from=$attrs key=atrGroup item=atrs}
   <h3>{$atrGroup}</h3>
   <table class="table table-striped table-hover">
       {section loop=$atrs item=atr}
           <tr>
              <td class="col-md-4">{$atr[0]}</td>
              <td>{$atr[1]}</td>
           </tr>
       {/section}
   </table>
{/foreach}

从上述组件中添加，并将其添加到根主import '../node_modules/react-intl-tel-input/dist/main.css';文件的顶部。

如果这不起作用，请尝试复制文件本身，然后直接使用HTML App.js标签将其包含在index.html中。（只需确保创建该文件的副本并将其添加到<link />文件夹中即可。您将无法从node_modules目录中引用它。）

Answer 2

如果我对文档here的理解是正确的，则使用props属性，可以使用component属性将props传递到实际渲染的组件。换句话说，执行<Field component={IntlTelInput} props={{ test: 123 }} />，而Field组件则按照<IntlTelInput test={123} />的方式进行操作。

解决方案是将所需的适当道具放入Field的{{1}}道具中。在您的第一个示例中，应该是这样的：

props

缺乏样式可能是由于缺少<Field name={name} component={IntlTelInput} props={{ preferredCountries: ["us", "ca"], css: ["intl-tel-input", "form-control"], onPhoneNumberChange: onChange, }} />道具。还要记住为该组件定义css属性。

使用Redux形式的React组件“ Field”组件

2 个答案: