插入值<input>进入 object -ReactJS

Question

I am working on an app and in this section the admin creates categories for the website via a form. On one section I need to get back the names of the categories in 3 different languages.

I need to get the states of the <input> for each language here is the state:

export class Partner extends Component {
  state = {
    name: "",
    display_name:{
      en:"",
      fr:"",
      ar:""
    },        
    is_active: Boolean,
  };

As you can see I store the strings from the inputs into the display_name object (that I will need for some CRUD afterwards).

Here is the div from the form where I get the display name in English from the user

<div className="row">
  <div className="input-field col s12">
    <input
      name="display_name"
      value={this.state.display_name.en} ///How do I set the state of display_name in "en" ?
      onChange={e => this.handleChange(e)}
      id="display_name"
      autoComplete="off"
    />
    <label className="active">
      Display_name of the category in English
    </label>
  </div>
</div>

How do I setState "en" in display_name?

Answer 1

It would be nice to see what you've tried for your handleChange function, to see if you're close or not:)

However, here's how you can set the en property inside the display_name object in your state, using your current handleChange method:

handleChange = (e) => {
    this.setState({
        display_name: {
            // es6 'spread' operator to copy the current properties of
            // -> this.state.display_name into a new object...
            ...this.state.display_name,
            // here, update the new value of 'en'
            en: e.target.value
        }
    })
}

Note : The above method is not very dynamic, so you may want to change the implementation to something like this:

handleLanguageChange = (e, language) => {
    this.setState({
        display_name: {
            // still copy old 'display_name' values like before
            ...this.state.display_name,
            // now update the language based off 'language' property
            [language]: e.target.value
        }
    })
}

This second option allows you to reuse handleLanguageChange with input elements of different languages. You would use it in your JSX like this:

<input
    name="display_name_en"
    value={this.state.display_name.en}
    onChange={e => this.handleLanguageChange(e, 'en')}
    id="display_name_en"
    autoComplete="off"
/>
<input
    name="display_name_fr"
    value={this.state.display_name.fr}
    onChange={e => this.handleLanguageChange(e, 'fr')}
    id="display_name_fr"
    autoComplete="off"
/>
<!-- and so on... -->