首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将多个输入添加到对象以在ReactJS中呈现

如何将多个输入添加到对象以在ReactJS中呈现
EN

Stack Overflow用户
提问于 2018-08-07 05:38:28
回答 1查看 1.9K关注 0票数 2

React是新手,可以管理呈现单个输入值,但我试图以列表形式呈现多个输入值,并且无法理解它。

我尝试将输入添加到对象中,并将对象推入数组(这是我遇到的主要问题),然后呈现数组中的项。我以jobs为例,展示了到目前为止我所管理的内容……有人能给我指引正确的方向吗?

代码语言:javascript
复制
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      post: {
        name: '',
        description: ''
      },
      jobs: []
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  };

  handleChange(e){
    this.setState({
      post.name: e.target.value,
      post.name: e.target.value
    })
  }

  handleSubmit(e){
    e.preventDefault();

// This is where i've trying to push the inputs into an object...

    this.setState({
      post.name: '',
      post.description: '',
      jobs: this.state.items.concat(this.state.post)
    })
  }

  render() {
    const listItems = this.state.jobs.map((data, key) =>
    <li key={key}>{data}</li>
  )
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <form>
          <input onChange={this.handleChange} type="text" value={this.state.post.name} placeholder="post name" />
          <input onChange={this.handleChange} type="text" value={this.state.post.description} placeholder="post description" />
          <button onClick={this.handleSubmit}>Submit</button>
        </form>
        <ul>
          {listItems}
        </ul>
      </div>
    );
  }
}

任何帮助都将不胜感激!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-07 05:47:56

您需要分别呈现jobs数组中元素的每个字段,因为React不能呈现对象。

{ post.name: '', post.description: ''}是无效的JavaScript语法。您必须将post设置为新对象。

您还可以使用输入的name来选择要更新的post对象中的哪个字段,以便可以为两个输入共享相同的onChange处理程序。

示例

代码语言:javascript
复制
class App extends React.Component {
  state = {
    post: {
      name: "",
      description: ""
    },
    jobs: []
  };

  handleChange = e => {
    const { name, value } = e.target;

    this.setState(prevState => ({
      post: { ...prevState.post, [name]: value }
    }));
  };

  handleSubmit = e => {
    e.preventDefault();

    this.setState(prevState => ({
      jobs: [...prevState.jobs, prevState.post],
      post: { name: "", description: "" }
    }));
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <form>
          <input
            name="name"
            onChange={this.handleChange}
            type="text"
            value={this.state.post.name}
            placeholder="post name"
          />
          <input
            name="description"
            onChange={this.handleChange}
            type="text"
            value={this.state.post.description}
            placeholder="post description"
          />
          <button onClick={this.handleSubmit}>Submit</button>
        </form>
        <ul>
          {this.state.jobs.map((job, index) => (
            <li key={index}>
              {job.name}: {job.description}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51715994

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档