Question

我有一个textarea，我想将其内容推送到我定义的数组中

我创建了一个Tasks组件，并使用onClick属性将其textarea的innerhtml值推入数组。

App.js：

import React from 'react';
import Tasks from './tasks.js';
import './App.css';

let tasks= [
  {name:""},
  {name:""},
  {name:""},
  {name:""},
  {name:""}

]

function App(props) {
  return (
    <div className="App">
      <Tasks onClick={()=>{

        tasks.push(this.props.value)
      }} />
     </div>
  );
}

export default App;

tasks.js：

import React from 'react'



class Tasks extends React.Component {
    render() {
        return (<div>
<textarea value={this.props.value} ></textarea>
<button onClick={this.props.onClick}>Add task</button>
        </div>)

    }

}



export default Tasks

应用程序编译成功，但是当我单击按钮时，出现“无法读取未定义的属性'props'”错误

Answer 1

维护子组件中的状态以存储文本区域的值，

constructor(props) {
    super(props)
    this.state = {
      value: '',
    }
  }

当文本区域更改时，您可以设置状态值，

handleChange = e => {
    this.setState({value: e.target.value})
}

单击按钮时，您需要将值从文本区域传递到父组件，例如，

<textarea value={this.state.value} onChange={this.handleChange} />
<button onClick={() => this.props.onClick(this.state.value)}>
     Add task
</button>

在父组件中，您可以将文本区域的值推入数组中。

function addData(val) {
  tasks.push(val)
  console.log(tasks)
}
<Tasks onClick={value => addData(value)} />

Demo

将textarea的内容推入数组

1 个答案: