使用map渲染组件

Question

我是React的新手，对于一般的编程来说还是一个新手，而且我已经练习了一些只是为了让基础知识失效。

我目前有这个：

＆＃13;

＆＃13;

class App extends Component {
  constructor(props){
    super(props);

		this.state={strings: [], 
			  textAreas: [<TextareaComponent ref='index0' onInput={this.onInputHandler} />, 
			  <TextareaComponent ref='index1' onInput={this.onInputHandler} />]};

	   this.onInputHandler = this.onInputHandler.bind(this);
	}

	

	onInputHandler(){
		const stringsArray = this.refs['index1'].refs.content.value.split(/\r|\n/);
		this.setState({strings: (stringsArray)});
	}

	

	render(){
		console.log(this.state.textAreas);
		const renderTextareas = this.state.textAreas.map((textArea, index) => {
	 		return <div key={index}>{textArea}</div>
		})
		return(
	 		<div>
	 			{renderTextareas}
	 		</div>
		);
	}
};

class TextareaComponent extends Component {
	constructor(props){
		super(props);
	}

	render(){
		return(
	 		<div>
	 			<textarea ref='content' onChange={this.props.onInput}></textarea>
	 		</div>
		);
	}
};

＆＃13;

＆＃13;

＆＃13;

现在，我的计划是添加一个按钮，将新的TextareaComponent推送到textAreas数组，以向DOM渲染额外的textarea。目前我只是将第二个textarea设置为我想要获取值的元素。

屏幕上出现了所有内容，但我的问题是当我输入任何已渲染的textareas时出现此错误：Uncaught TypeError：无法读取属性＆＃39; index1＆＃39;未定义的。

我注意到，当我直接将Textarea组件放在＆ref; of index1＆＃39;在父组件上，控制台正确记录值，似乎能够读取＆＃39; index1＆＃39;属性。我不确定我在哪里弄错了。

提前致谢

Answer 1

你需要绑定onInputHandler函数，同时将它作为prop传递给 TextareaComponent组件

＆＃13;

＆＃13;

class App extends Component {
  constructor(props){
    super(props);

		this.state={strings: [], 
			  textAreas: [<TextareaComponent ref='index0' onInput={this.onInputHandler.bind(this)} />, 
			  <TextareaComponent ref='index1' onInput={this.onInputHandler.bind(this)} />]};

	   this.onInputHandler = this.onInputHandler.bind(this);
	}

	

	onInputHandler(){
		const stringsArray = this.refs['index1'].refs.content.value.split(/\r|\n/);
		this.setState({strings: (stringsArray)});
	}

	

	render(){
		console.log(this.state.textAreas);
		const renderTextareas = this.state.textAreas.map((textArea, index) => {
	 		return <div key={index}>{textArea}</div>
		})
		return(
	 		<div>
	 			{renderTextareas}
	 		</div>
		);
	}
};

class TextareaComponent extends Component {
	constructor(props){
		super(props);
	}

	render(){
		return(
	 		<div>
	 			<textarea ref='content' onChange={this.props.onInput}></textarea>
	 		</div>
		);
	}
};

＆＃13;

＆＃13;

＆＃13;