Javascript 从输入设置组件中的状态

我试图在我的组件中设置输入的状态，并在我的app.js中使用它。我怎样才能用道具做到这一点？我尝试了

onChangeText={（tips）=>this.setState（{comment}）}

但是我只得到了未定义的

const Comments = (props) => {
  return (
    <View style={styles.container}>
<Input style={styles.field}
  autoCorrect={false}
  autoCapitalize="none"
  onChangeText={props.onChangeText}
  placeholder="Skriv en kommentar..."
/>
<Button rounded style={styles.button} onPress={() => props.addComment(props.id)}>
  <Text style={styles.buttonText}>Kommenter</Text>
</Button>
</View>
  )
}
export { Comments };

const注释=（道具）=>{
返回(
props.addComment（props.id）}>
科门特
)
}
导出{评论}；

在我的app.js中，我有：

我的app.js

    export default class Home extends Component {
    constructor(props){
    super(props);
    this.state = {
      comment: '',
    }
   newComment = (comment) => {
      change = (comment) => this.setState(comment)
      alert(comment)
   }
  renderItem = ({ item, index }) => {
   return (
       <Comments
          addComment={this.newComment}
          comments={this.state.comment}
          onChangeText={this.change}
        />
   )
  }
 }

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
评论：“”，
}
新成员=（评论）=>{
change=（comment）=>this.setState（comment）
警告（评论）
}
renderItem=（{item，index}）=>{
返回(
)
}
}

假设您有一个父组件

和一个标准的

组件。使用输入的初始值设置父组件的状态。如下所示：

class MyContainer extends Component{
    state ={ value: '' }

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

现在，只需通过道具将对该函数的引用传递给您的

组件：

---

假设您有一个父组件

和一个标准

组件，请更深入地了解。使用输入的初始值设置父组件的状态。如下所示：

class MyContainer extends Component{
    state ={ value: '' }

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

现在，只需通过道具将对该函数的引用传递给您的

组件：

---

深入了解您不能在无状态组件中使用

setState

。 您需要从父函数传递一个

处理程序

，该处理程序根据

onChangeText

父母亲

change=（comment）=>this.setState（{comment}）

小孩

const注释=（道具）=>{
返回(
)
}

您不能在无状态组件中使用

setState

。 您需要从父函数传递一个

处理程序

，该处理程序根据

onChangeText

父母亲

change=（comment）=>this.setState（{comment}）

小孩

const注释=（道具）=>{
返回(
)
}

我强烈建议你先看官方的。不是本地的，而是普通的。因为很明显，你正在为基本的东西而挣扎

• 如果要在子组件中使用道具，必须从父组件传递道具
• 如果要更改子组件中父组件的状态，必须将处理程序函数作为道具传递给子组件

您只将

注释

传递给

注释

组件，但未传递处理程序函数。因此，您不能在此处添加带有未定义处理程序的注释

我提供了一个React的工作示例。在这里，我们在

App

的状态中保存注释，并将注释映射到一个单独的

Comment

组件。该组件是无状态组件，仅呈现传递给它的注释。此外，它还有一个按钮来删除提供的注释

为了添加新注释，我们在

App

组件中保存一个输入。此输入更改

input

状态。当我们要添加新注释时，我们使用此

input

创建一个新注释，并为其分配一个

id

。然后将其添加到我们的状态

类应用程序扩展了React.Component{
状态={
评论：[]，
输入：“，
当前ID:0
};
handleInputChange=e=>{
const{value}=e.target；
this.setState（{input:value}）；
};
renderComments=（）=>(
评论：
{this.state.comments.map（comment=>(
))}
);
addNewComment=（）=>{
const{currentId，input}=this.state；
康斯特纽门特={
id:currentId+1，
文本：输入
};
this.setState（prevState=>({
评论：[…prevState.comments，newComment]，
currentId:prevState.currentId+1，
输入：“”
}));
};
removeComment=注释=>{
const{comments}=this.state；
const newcommons=comments.filter（el=>el.id！==comment.id）；
this.setState（{comments:newComments}）；
};
render（）{
const{comments，input}=this.state；
返回(
添加注释

添加新注释

{！comments.length？还没有评论
：this.renderComments（）}
);
}
}
const Comment=props=>{
const{comment，removeComment}=props；
const handleRemove=（）=>removeComment（注释）；
返回(
Id:{comment.Id}

Text:{comment.Text}

删除评论
);
};
ReactDOM.render（，document.getElementById（“根”）；

---

我强烈建议你先看官方的。不是本地的，而是普通的。因为很明显，你正在为基本的东西而挣扎

• 如果要在子组件中使用道具，必须从父组件传递道具
• 如果要更改子组件中父组件的状态，必须将处理程序函数作为道具传递给子组件

您只将

注释

传递给

注释

组件，但未传递处理程序函数。因此，您不能在此处添加带有未定义处理程序的注释

我提供了一个React的工作示例。在这里，我们在

App

的状态中保存注释，并将注释映射到一个单独的

Comment

组件。该组件是无状态组件，仅呈现传递给它的注释。此外，它还有一个按钮来删除提供的注释

为了添加新注释，我们在

应用程序

组件中保存了一个输入。此输入更改了

输入

状态。当我们要添加新注释时，我们

const Comments = (props) => {
  return (

    <Input style={styles.field}
      ...// other stuff
      onChangeText={props.onChangeText}
    />

    </View>
  )
}