Question

我在<textarea>函数中创建了map()个元素，并且在渲染组件时我试图在每个元素中获取不同的值。

// Inside render method of ComponentA

fruits.map((fruit) => {
  return <textarea name={fruit.title} value={this.props.fruit.title} onChange={this.props.handleChange}
})

这正确设置了name={fruit.title}，但是对于value道具，标题为undefined却给我一个错误。

似乎从字面上将其视为this.props.fruit之类的东西，而不是fruit.title的值。

我想传递不同的价值支持，以便可以从父组件中通过以下方式使用它：

// State and rendered components inside ComponentB

state = {
  apple: '',
  orange: ''
}

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

<componentA
  handleChange={this.handleChange}
  apple={this.state.apple}
  orange={this.state.orange}
/>

Answer 1

这似乎是映射函数中有小错误的情况。尝试更换：

value={this.props.fruit.title}

使用：

value={fruit.title}

在您从<textarea>回调返回的map()元素上。

此外，由于要在循环中渲染文本区域，因此请确保通过替换以下内容正确调用onChange：

onChange={this.props.handleChange}

使用：

onChange={e => this.props.handleChange(e)}

另外，请考虑向key添加唯一的<textarea/>属性，以确保map()函数中元素列表的正确呈现，如下所示：

fruits.map((fruit, index) => {
  return <textarea name={fruit.title} value={fruit.title} key={index} onChange={e => this.props.handleChange(e)}></textarea>
})

Answer 2

尝试一下：

state = {
  fruits:[{title:'apple'},{title:'orange'}]
};

<SubmitForm
 handleChange={this.handleChange}
 fruits={[this.state.fruits]}
/>

Answer 3

要实现您的要求，请考虑针对ComponentA的以下实现：

class ComponentA extends React.Component {

    render() {

        // Create a local array from apply and orange props
        const fruits = [ this.props.apple, this.props.orange ];

        // Map over the fruits and render each textarea as required
        return (<div>{ 
            fruits.map((fruit, index) => {
                return <textarea key={index}
                                 name={fruit} 
                                 value={fruit} 
                                 onChange={this.props.handleChange}></textarea>
            })</div>)    
    }
}

ReactJS：从父组件道具传递要映射的道具是未定义的

3 个答案: