我的按鈕沒有從JS React中獲取值並沒有輸入

Question

好的，所以我想在該字段中輸入一個名稱，然后單擊添加名稱以將其添加到列表中，除了按添加時它只會在列表中添加一個項目符號點，所以它通常可以正常工作。 這是我的代碼

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

也可以通過簽名函數（state，props）=> newState傳遞一個函數。 這會排隊進行原子更新，該原子更新在設置任何值之前先查詢state和props的先前值。 例如，假設我們想通過props.step增加state的值：