Как генерировать уникальные идентификаторы в реакции. js компонент - PullRequest
Новая
       31

Как генерировать уникальные идентификаторы в реакции. js компонент

1 голос
/ 01 апреля 2020

У меня есть функция рендеринга в компоненте, которая отвечает за рендеринг элементов управления на странице. Пока все работает нормально. 

render()
{
render 
(
{this.state.Inputs.map(input => {
if (input.CODE === "VARIABLE") {
  return (
    <div className="row p-1">
      <div className="col-sm-4">
        <label>
          <b>{input.LABEL_NAME}</b>
        </label>
      </div>
      <div className="col-sm-6">
        {this.renderControl(input.WIDGET_TYPE)}
        <br />
      </div>
    </div>
  );
}
})
)
}

и ниже моя функция renderControl (). Я хочу генерировать уникальные идентификаторы для каждого элемента управления, когда я отображаю его на странице. Я не уверен, как это сделать. Не могли бы вы помочь. Заранее спасибо. 

renderControl = controlName => {
  switch (controlName) {
    case "INTEGER":
    case "TEXTBOX":
    case "MEDIUM_TEXTBOX":
    case "NUMBER":
      return <input type="text" width="70%" className="txtSize" />;
    case "DROPDOWN":
    case "DIALOG":
      return <Dropdown />;
    case "DATE":
      return (
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
      );
    case "DIALOG":
      return <Dropdown />;
    case "BOOLEAN":
      return (
        <div className="some-class">
          <input type="radio" className="radio" name="x" value="y" id="y" />
          <label htmlFor="y">Yes</label>
          <input type="radio" className="radio" name="x" value="z" id="z" />
          <label htmlFor="z">No</label>
        </div>
      );
    default:
      return;
  }
};

Ответы [ 3 ]

0 голосов
/ 01 апреля 2020

Измените эти 4 строки: 

this.state.Inputs.map((input, index) =>

{this.renderControl(input.WIDGET_TYPE, index)}

renderControl = (controlName, index)

return <input type="text" key={index} width="70%" className="txtSize" ></input>;
0 голосов
/ 01 апреля 2020

Передайте уникальный идентификатор из входного объекта, предполагая, что LABEL_NAME уникален. Если нет, то передайте индекс из функции карты. 

{this.state.Inputs.map((input, index) => {
if (input.ROW_CLASS_CODE === "MODEL_VARIABLE") {
  return (
    <div className="row p-1" key={input.LABEL_NAME}> // Change this line
      <div className="col-sm-4">
        <label>
          <b>{input.LABEL_NAME}</b>
        </label>
      </div>
      <div className="col-sm-6">
        {this.renderControl(input.WIDGET_TYPE)}
        <br />
      </div>
    </div>
  );
}
0 голосов
/ 01 апреля 2020

измените свой код на следующий 

render()
{
render 
(
{this.state.Inputs.map((input,key) => {
                if(input.ROW_CLASS_CODE === "MODEL_VARIABLE"){
                    return (
                        <div className="row p-1">
                        <div className="col-sm-4">
                        <label ><b>{input.LABEL_NAME }</b></label>
                        </div>
                        <div className="col-sm-6">
                        {this.renderControl(input.WIDGET_TYPE,key)} 
                        <br></br>
                        </div>
                        </div>
                            )
                }
})
)
}


renderControl = (controlName,key) =>{
        switch(controlName) {
            case 'INTEGER_FIELD':
            case 'SMALL_TEXTBOX':
            case 'PERCENTAGE':
            case 'MEDIUM_TEXTBOX':
            case 'REAL_NUMBER':
                case 'MONEY':
                return <input type="text" key={key} width="70%" className="txtSize" ></input>;
            case 'NARROW_DROPDOWN':
            case 'SELECTION_DIALOG':
                return (<Dropdown key={key}></Dropdown>);
            case 'DATE_FIELD':
                return (<DatePicker key={key}
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                />)
            case 'SELECTION_DIALOG':
                return <Dropdown key={key}></Dropdown>;
            case 'BOOLEAN_FIELD':
                return (<div className="some-class" key={key}>
                <input type="radio" className="radio" name="x" value="y" id="y" />
                <label htmlFor="y">Yes</label>
                <input type="radio" className="radio" name="x" value="z" id="z" />
                <label htmlFor="z">No</label>
              </div>);
            default:
              return ;
          }
    }`
...