时间戳

首页 > 解决方案 > 如何使用 onchange 设置具有来自 TextField 的值的状态数组

reactjs - 如何使用 onchange 设置具有来自 TextField 的值的状态数组

问题描述

我是新手，正在尝试在数组中添加字符串值。我正在使用 Material-UI 对象。

我的州有

this.state: {
  roles: []
}

按钮推动角色中未定义的元素，增加其长度。

  clickAddRole = () => {
    this.setState({roles: this.state.roles.concat([undefined]) });
  };

所以现在我们有一些角色数组的长度。文本字段是用生成的

      this.state.roles.map((item, i)=> {
        return (
          <TextField id={'roles['+i+']'} label={'role '+i} key={i} onChange={this.handleChange('roles['+i+']')}  />
        )
      })

onchange 事件的处理方式如下

  handleChange = name => event => {
    console.log(name);
    this.setState({[name]: event.target.value});
    console.log(this.state.roles);
  }

console.log 语句生成如下输出

roles[0]
[undefined]

我预计

roles[0]
["somedata"]

这里出了什么问题？数据未在角色数组中设置。

整个代码文件是

const styles = theme => ({
  error: {
    verticalAlign: 'middle'
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 300
  },
  submit: {
    margin: 'auto',
    marginBottom: theme.spacing.unit * 2
  }
})

class AddModule extends Component {
  constructor() {
    super();
    this.state = {
      roles:[],
      open: false,
      error: ''
    }
  }

  clickSubmit = () => {
    const module = {
      roles: this.state.roles || undefined
    }
    create(module).then((data) => {
      if (data.error) {
        this.setState({error: data.error})
      } else {
        this.setState({error: '', 'open': true});
      }
    })
  }

  clickAddRole = () => {
    this.setState({roles: this.state.roles.concat([undefined]) });
  };

  handleChange = name => event => {
    console.log(name);
    this.setState({[name]: event.target.value});
    console.log(this.state.roles);
  }
  render() {
    const {classes} = this.props;
    return (
      <div>
            <Button onClick={this.clickAddRole} >Add Role</Button>
            {
              this.state.roles.map((item, i)=> {
                return (
                  <TextField className={classes.textField} id={'roles['+i+']'} label={'role '+i} key={i} onChange={this.handleChange('roles['+i+']')}  />
                )
              })
            }
      </div>
    )
  }
}

标签： reactjs

解决方案

伙计，我有问题（可能是暂时的）。I 数组元素是数组的子元素。所以改变数组元素中的数据不需要setState。

所以这就是我所做的......

  handleRolesChange = name => event => {
    const i = [name];
    this.state.roles[i]=event.target.value;
  }

我还将 Textfield onchange 参数更改为 onChange={this.handleRolesChange(i)} 其中 i 是映射函数中从零开始的索引。

所有这些都可以根据我的需要完美运行。但是，如果您认为我通过跳过 setState 改变了角色数组，我将保持未回答的问题并等待正确且合法的答案。

非常感谢你们的支持。我们必须努力寻找解决这些基本问题的办法。:)

推荐阅读