Question

我正在尝试使用reactjs计算剩余的角色。我已经定义了与状态对话的函数，并传递给子组件。在子组件中，我收到错误未捕获的TypeError：无法读取未定义的属性“长度”。

app.js

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {max_char:32};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(charLength){
      console.log('charLength');
      this.setState({
        max_char:32 - charLength.length
      });
      console.log(this.state.max_char);
  }

  render() {
    return (
      <div>
            <Layout fixedHeader>
            <Content>
              <div className="page-content">
                <DeviceEventList />
                <DeviceDialog onChange={this.handleChange} />
              </div>
              <div className="empty-space">
              </div>
            </Content>
            </Layout>
      </div>
    );
  }
}

设备-dialog.js

class DeviceDialog extends Component {
  constructor(props) {
    super(props);
    console.log('this.props',this.props.onChange);
  }

  handleInputChange(event){
    console.log(event.target.value);
    let name = event.target.value;
    this.props.onChange(name);
  }

  renderOwnADevice(){
    console.log('open',this.props.active_device_event.open);
    return(
      <div className="device-action">
        <Dialog open={this.props.active_device_event.open} onCancel={this.props.CancelDeviceEvent}>
          <DialogContent>
              <Textfield
                  onChange={()=> {this.handleInputChange(event)}}
                  pattern="-?[0-9]*(\.[0-9]+)?"
                  error="Input is not a number!"
                  label="Device Serial Number"
                  floatingLabel
                />
                <span style={{ float:'right'}}>character</span>
          </DialogContent>
        </Dialog>
      </div>
    )
  }


  render() {
    if ( !this.props.active_device_event){
      return <h5 style={{ textAlign:'center' }}>Click icon based on your work</h5>;
    }
    let icon_name = this.props.active_device_event.icon_name;
    if( icon_name == 'devices_other'){
      return (<div>Device Other</div>);
    }
    if( icon_name == 'add_circle_outline'){
      return (this.renderOwnADevice());
    }
  }
  }

Answer 1

我猜onChange={()=> {this.handleInputChange(event)}}应为onChange={(event) => {this.handleInputChange(event)}}。现在您传递的是未定义的事件变量。

顺便说一句：也许最好在构造函数中绑定处理程序，就像在app.js中一样，而不是在渲染中使用匿名函数包装器。

Answer 2

onChange={()=> {this.handleInputChange(event)}}永远不会在此行中定义：handleChange。因此，您的undefined函数正在接收<Textfield onChange={this.handleInputChange} pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!" label="Device Serial Number" floatingLabel />值，而不是字符串。

this.handleInputChange

现在，您的{{1}}将正确传递参数。

无法读取undefined [reactjs]的属性'length'

2 个答案: