Question

我想创建一个重复的输入元素，如下所示

<input
  type="text"
  className="form-control mb-3"
  id="whatweoffer"
  name="whatweoffer"
  value={this.state.whatweoffer}
  onChange={this.handleChange}
  placeholder="what we offer"
  required
/>;

但是它应该具有不同的名称属性，并且必须使用该值来设置状态

handleChange = e => {
  this.setState({ [e.target.name]: e.target.value });
};

有人可以帮我吗？

Answer 1

制作一个对象数组，其中将包含输入的属性，并将其设置为state。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class checkifdone : MonoBehaviour
{

public AudioSource checkwin;
public GameObject wincheck;
public Image neontastic;
public Image neontasticd;
public AudioSource ambient;
public AudioSource music;
public AudioSource deathamb;
public GameObject blackout;
// Start is called before the first frame update
void Start()
{
    wincheck.gameObject.SetActive(false);
    neontastic.enabled = false;
    neontasticd.enabled = false;


}

private void OnEnable()
{
    checkwin.Play();
    neontastic.enabled = true;
    neontasticd.enabled = true;
}

private void OnDisable()
{
    checkwin.Stop();

    neontastic.enabled = false;
    neontasticd.enabled = false;
}
}

并在this.state = { inputs: [ { name: 'whatweoffer_name', value: 'whatweoffer_value', placeholder: 'whatweoffer_placeholder' }, { name: 'whatweoffer_2_name', value: 'whatweoffer_2_value', placeholder: 'whatweoffer_2_placeholder' } ] }中使用它：

render()

然后您的render() { return( {this.state.inputs.map(input => ( <input type="text" className="form-control mb-3" id={input.name} name={input.name} value={input.value} onChange={this.handleChange} placeholder={input.placeholder} required />; ))} ) }变为：

handleChange

如何在reactjs中创建具有唯一名称属性的重复输入元素

1 个答案: