Ich bin neu in React und immer noch ziemlich neu im Programmieren und ich habe ein bisschen geübt, nur um die Grundlagen zu verbessern.Kann die Eigenschaft von undefined nicht lesen, wenn ich map verwende, um Komponenten zu rendern
Im Moment habe ich dies:
class App extends Component {
constructor(props){
super(props);
\t \t this.state={strings: [],
\t \t \t textAreas: [<TextareaComponent ref='index0' onInput={this.onInputHandler} />,
\t \t \t <TextareaComponent ref='index1' onInput={this.onInputHandler} />]};
\t this.onInputHandler = this.onInputHandler.bind(this);
\t }
\t
\t onInputHandler(){
\t \t const stringsArray = this.refs['index1'].refs.content.value.split(/\r|\n/);
\t \t this.setState({strings: (stringsArray)});
\t }
\t
\t render(){
\t \t console.log(this.state.textAreas);
\t \t const renderTextareas = this.state.textAreas.map((textArea, index) => {
\t \t \t return <div key={index}>{textArea}</div>
\t \t })
\t \t return(
\t \t \t <div>
\t \t \t \t {renderTextareas}
\t \t \t </div>
\t \t);
\t }
};
class TextareaComponent extends Component {
\t constructor(props){
\t \t super(props);
\t }
\t render(){
\t \t return(
\t \t \t <div>
\t \t \t \t <textarea ref='content' onChange={this.props.onInput}></textarea>
\t \t \t </div>
\t \t);
\t }
};Gerade jetzt, mein Plan ist eine Schaltfläche hinzufügen, die eine neue TextareaComponent auf den Textbereiche Array schieben würden ein zusätzliches Textfeld auf das DOM zu machen . Momentan habe ich nur das zweite Textfeld als das Element festgelegt, von dem ich Werte erhalten möchte.
Alles erscheint auf dem Bildschirm, aber mein Problem ist, dass ich diesen Fehler bekomme, wenn ich auf einem der Textfelder, die gerendert wurden, eingeben: Uncaught TypeError: Kann die Eigenschaft 'index1' von undefined nicht lesen.
Ich bemerkte, dass, wenn ich direkt die Textarea-Komponente mit einem Verweis von 'index1' auf die übergeordnete Komponente platziert, die Konsole die Werte ordnungsgemäß protokolliert und es in der Lage zu lesen scheint die Eigenschaft 'index1'. Ich bin mir nicht wirklich sicher, wo ich falsch liege.
Vielen Dank im Voraus
Dies gilt nicht direkt Ihre Frage beantworten, vorbei aber es ist wahrscheinlich eine schlechte Idee, React Elemente so in deinen Zustand zu setzen. Wie du sagst, wenn du sie aus dem Status entfernst und sie in 'render()' steckst, funktioniert es gut. Sie sollten "einfache" Werte in Ihrem Zustand behalten und nur in 'render()' JSX benutzen, um Ihren Zustand in Elemente zu verwandeln. –