React-Intl How to use FormattedMessage in input placeholder

匿名 (未验证) 提交于 2019-12-03 02:16:02

问题:

I'm unsure how to get the values from

<FormattedMessage {...messages.placeholderIntlText} /> 

into a placeholder format like input:

<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} /> 

as it would return [Object object] in the actual placeholder. Is there a way to get the actual correct value?

回答1:

The <Formatted... /> React components in react-intl are meant to be used in rendering scenarios and are not meant to be used in placeholders, alternate text, etc. They render HTML, not plain text, which is not useful in your scenario.

Instead, react-intl provides a lower level API for exactly this same reason. The rendering components themselves use this API under the hoods to format the values into HTML. Your scenario probably requires you to use the lower level formatMessage(...) API.

You should inject the intl object into your component by using the injectIntl HOC and then just format the message through the API.

Example:

import React from 'react'; import { injectIntl, intlShape } from 'react-intl';  const ChildComponent = ({ intl }) => {   const placeholder = intl.formatMessage({id: 'messageId'});   return(      <input placeholder={placeholder} />   ); }  ChildComponent.propTypes = {   intl: intlShape.isRequired }  export default injectIntl(ChildComponent); 

Please note that I'm using some ES6 features here, so adapt according to your setup.



回答2:

  • You can use intl prop from injectIntl HoC
  • You can also provide function as child component:

<FormattedMessage {...messages.placeholderIntlText}> {(msg) => (<input placeholder={msg} />)} </FormattedMessage>



回答3:

You are trying to render a React component named FormattedMessage into a placeholder tag which is expecting a string.

You should instead just create a function named FormattedMessage that returns a string into the placeholder.

function FormattedMessage(props) {     ... }  <input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` /> 


回答4:

In my case I had the whole app in one file, so using export wouldn't work. This one uses the normal class structure so you can use the state and other functionality of React if needed.

class nameInputOrig extends React.Component {   render () {     const {formatMessage} = this.props.intl;     return (         <input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} />     );   } }  const nameInput = injectIntl(nameInputOrig); 

Apply using the created constant:

class App extends React.Component {     render () {         <nameInput />     } } 


回答5:

Based on the react intl wiki the implementation of an input box with translatable placeholder will look like:

import React from 'react'; import { injectIntl, intlShape, defineMessages } from 'react-intl';  const messages = defineMessages({   placeholder: {     id: 'myPlaceholderText',     defaultMessage: '{text} and static text',   }, });  const ComponentWithInput = ({ intl, placeholderText }) => {   return (     <input       placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }     />   ); };  ComponentWithInput.propTypes = {   intl: intlShape.isRequired };  export default injectIntl(ComponentWithInput); 

and the useage of it:

import ComponentWithInput from './component-with-input'; ... render() {   <ComponentWithInput placeholderText="foo" /> } ... 

The id: 'myPlaceholderText', part is necessary to enable the babel-plugin-react-intl collect the messages for translation.



回答6:

Like this:



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!