Question

好吧所以我想在字段中输入一个名称，然后点击addname将其添加到列表中，它大部分都有效，除非你按添加它只是在列表中添加一个项目符号点，所以它的空白。继承我的代码

import React from 'react'

const List = (props) => <ul> { _.map(props.nameList, (name) => {
      return <li>{name}</li>})}</ul> 

export default class NameList extends React.Component {
    constructor() {
        super()
        this.state = {nameList: [ "Richard" ]}
    }

    render() {
        var allNames =  {nameList: [ "Richard" ]}
        return (
            <div>
              <input type ="text" value= {this.props.name}/>
              <button onClick={() => { this.setState({ nameList: _.concat(this.state.nameList, this.props.name)})}}>AddName</button>
              <List nameList={this.state.nameList}/>
            </div>

        )
    }
}

Answer 1

这里的问题是您的文本输入实际上无法将其值重新绑定到任何内容，因此当您单击按钮this.props.name未定义时。当您致电setState时，您可能希望以这种方式添加您要添加的人的姓名状态，您可以将其与该值绑定。这是更新的工作代码。

import React from 'react';

const List = props => <ul> { _.map(props.nameList, name => <li>{name}</li>)}</ul>;

export default class NameList extends React.Component {
  constructor() {
    super();
    this.state = { nameList: ['Richard'], nameToAdd: '' };
    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {
    this.setState(prevState => ({ nameList: _.concat(prevState.nameList, this.state.nameToAdd), nameToAdd: '' }));
  }

  render() {

    return (
      <div>
        <input type="text" value={ this.state.nameToAdd } onChange={ e => this.setState({ nameToAdd: e.target.value }) } />
        <button onClick={ this.handleClick }>AddName</button>
        <List nameList={ this.state.nameList } />
      </div>

    );
  }
}

这里也是工作笔http://codepen.io/finalfreq/pen/OpWyqX

主要区别在于我在输入中添加了onChange并向NameList组件添加了nameToAdd状态，只要textinput发生更改，它就会更新。添加名称后，它会清除nameToAdd状态。

我还使用了setState的回调函数，当你依靠组件当前状态来决定如何更新该部分状态时，你想要做什么。

反应文件在这里进行了解释 https://facebook.github.io/react/docs/react-component.html#setstate

也可以传递带签名的功能 function（state，props）=＆gt; newState。这会将原子更新排入队列在设置之前咨询状态和道具的先前值值。例如，假设我们想要增加状态值通过props.step：

我的按钮没有从JS React获取值并输入

1 个答案: