react 如何将遍历出来的form中的input 像vue那样的数据双向绑定

Question

comps中的对象可以没有固定上限的添加

请问如何在某一个input中输入的内容存入对应下标的集合中

例：
根据 this.state.comps循环出3个form input =》 我在第二个input中输入内容 =》 存入comps[1].sign中

state = {
        comps: [
            {
                sign: '',
                msg: ''
            },
            {
                sign: '',
                msg: ''
            },
            {
                sign: '',
                msg: ''
            },
        ]
    
sign = (e) => {
       //这里是input change事件
    }

render() {
        const { comps } = this.state;
        return (
            <Fragment>
                {
                    comps.map((v, i) => {
                        return (
                            <div className={s.content} key={i}>
                                    <Form name={`basic${i + 1}`}>
                                        <Form.Item label="短信签名">
                                            <Input size="large" value={v.sign} onChange={this.sign} />
                                        </Form.Item
                                        <Form.Item label="短信">
                                            <Input.TextArea autoSize={{ minRows: 5, maxRows: 5 }} />
                                        </Form.Item>
                                    </Form>
                            </div >
                        )
                }
            </Fragment>

        )
    }

Answer 1

function App() {
  const [arr, setArr] = React.useState([
    {
      name: 'jack',
      msg: 'hello jack'
    },
    {
      name: 'tom',
      msg: 'hello tom'
    }
  ])

  const msg = arr.map(item => `${item.name}-${item.msg}`).join(',,,,')

  const handleChange = (index, val) => {
    setArr(arr => arr.map((item, i) => i === index ? {
      msg: val,
      name: item.name
    } : item))
  }
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>
        {msg}
        </p>
      {
        arr.map((item, idx) => (
          <React.Fragment
          key={item.name}
        >
          <label htmlFor="">{item.name}</label>
          <input type="text" value={item.msg} onChange={e => handleChange(idx, e.target.value)}/>
          </React.Fragment>
        ))
      }

    </div>
  );
}